La alineación en CSS se usa para posicionar los elementos junto con establecer la distribución del espacio entre y alrededor de los elementos de contenido. Podemos alinear los elementos ya sea horizontal o verticalmente. Los diversos métodos y técnicas se utilizan para centrarlos, cuidando el margen izquierdo y derecho, etc. Los diversos métodos para alinear y su uso se analizan a continuación:
margin:auto: esta propiedad se utiliza para alinear un elemento de bloque en el centro.
Nota: Usar margin: auto no funcionará en IE8 a menos que se declare un !DOCTYPE.
Ejemplo 1: este ejemplo describe la alineación de CSS utilizando la propiedad margin: auto .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Center Align Elements</h2>
<div class="center">
This is div element on which
margin auto is used to horizontally
align it into center
</div>
</body>
</html>
Producción:
posición: absoluta; Podemos alinear los elementos usando esta propiedad.
Ejemplo 2: Este ejemplo describe la alineación CSS usando la posición: absoluta; propiedad.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Right Align</h2>
<div class="right">
<p>
Absolute positioned elements
can overlap other elements.
</p>
</div>
</body>
</html>
Producción:
alineación de texto: centro; Podemos alinear cualquier texto escrito en HTML en el centro. podemos usar esta propiedad en varios tipos de etiquetas.
Ejemplo 3: Este ejemplo describe la alineación CSS usando text-align: center; propiedad.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align: center;">
GeeksforGeeks
</h1>
<h2>BOTH TEXTS ARE AT CENTER</h2>
<div class="center">
<p>This text is centered.</p>
</div>
</body>
</html>
Producción:
padding: Para alinear elementos verticalmente podemos usar padding.
Ejemplo 4: Este ejemplo describe la alineación de CSS usando la propiedad de relleno.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h2>Center Vertically</h2>
<div class="center">
<p>This is vertically centered.</p>
</div>
</body>
</html>
Producción:
relleno y alineación de texto; Para alinear el texto tanto vertical como horizontalmente usando una combinación de padding y text-align: center.
Ejemplo 5: Este ejemplo describe la alineación de CSS utilizando las propiedades de relleno y alineación de texto.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
Here we use padding and
text-align to center the
div element vertically
and horizontally:
</p>
<div class="center">
<p>
This text is vertically
and horizontally centered.
</p>
</div>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome 95.0
- Microsoft Edge 95.0
- Firefox 93.0
- Ópera 80.0
- Safari 15.0
Publicación traducida automáticamente
Artículo escrito por ashishsaini3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA