En CSS, varias propiedades se pueden utilizar para alinear elementos horizontalmente.
Centrar - Uso de margin
Si el ancho de un elemento en bloque evitará que se extiende hacia los bordes de su contenedor. Utilice margin: auto; , para centrar horizontalmente un elemento dentro de su contenedor.
El elemento tomará el ancho especificado, y el espacio restante será dividido en partes iguales entre los dos márgenes:
Ejemplo
.center
{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
} Inténtalo tú mismo " Consejo: Centro de alineación no tiene ningún efecto si el width propiedad no se establece (o se establece en 100%).
Consejo: Para la alineación de texto, ver el CSS texto capítulo.
Izquierda y Derecha Alinear - Uso de position
Un método para la alineación de los elementos es usar position: absolute; :
Ejemplo
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Inténtalo tú mismo " Nota: los elementos posicionados absolutos se eliminan del flujo normal, y se pueden solapar elementos.
Consejo: Al alinear los elementos con position , defina siempre margin y padding para el <body> elemento. Esto es para evitar diferencias visuales en diferentes navegadores.
También hay un problema con IE8 y anterior, cuando se utiliza position . Si un elemento contenedor (en nuestro caso <div class="container"> ) tiene un ancho especificado, y el !DOCTYPE declaración no se encuentra, IE8 y versiones anteriores añadirán un 17px margin en el lado derecho. Este parece ser el espacio reservado para una barra de desplazamiento. Por lo tanto, ajustar el !DOCTYPE declaración cuando se utiliza position :
Ejemplo
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} Inténtalo tú mismo " Izquierda y Derecha Alinear - Uso de float
Otro método para la alineación de los elementos es utilizar el float propiedad:
Ejemplo
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Inténtalo tú mismo " Consejo: Al alinear los elementos de float , defina siempre margin y padding para el <body> elemento. Esto es para evitar diferencias visuales en diferentes navegadores.
También hay un problema con IE8 y anterior, cuando se utiliza float . Si el !DOCTYPE declaración no se encuentra, IE8 y versiones anteriores añadirán un 17px margin en el lado derecho. Este parece ser el espacio reservado para una barra de desplazamiento. Por lo tanto, ajustar el !DOCTYPE declaración al utilizar float :
Ejemplo
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} Inténtalo tú mismo "