Latest web development tutorials

CSS alineación horizontal (Horizontal Alinear)

En CSS, hay varias propiedades para el elemento de alineación horizontal.

Alinear elementos de bloque

Bloquear elemento es un elemento, ocupando todo el ancho de la parte delantera y trasera están los saltos de línea.

Ejemplos de elementos de bloque:

  • <H1>
  • <P>
  • <Div>

La alineación de texto, ver el texto CSS sección. .

En este capítulo, le mostraremos cómo bloquear la alineación horizontal de los elementos de diseño.

Alineado al centro, utilizando la propiedad de margen

Los elementos de bloque se pueden márgenes izquierdo y derecho establecen en la alineación "Auto".

Nota: El uso del margen de IE8: propiedad automático no funciona, a menos DOCTYPE declarado!

propiedades de los márgenes se pueden dividir arbitrariamente en la izquierda y la configuración de los márgenes adecuados se asignan automáticamente, el resultado es la aparición del elemento medio:

Ejemplos

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

Trate »

Consejo: Si la anchura es de 100%, la alineación no es eficaz.

Nota: IE5 hay un margen en el elemento ERROR bloque de procesamiento.Para que el ejemplo anterior trabajo en IE5, tenemos que añadir algo de código adicional. Ejemplos

El uso de la propiedad position se establece en la izquierda, alineado a la derecha

Una alineación elemento es utilizar posicionamiento absoluto:

Ejemplos

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Trate »

Nota: El posicionamiento absoluto no tiene nada que ver con el flujo del documento, para que puedan cubrir otros elementos de la página.

Crossbrowser problemas de compatibilidad

<P align similar cuando tales elementos, un margen predeterminado y elemento de relleno es siempre una buena idea. Esto es para evitar diferencias visuales en diferentes navegadores.

IE8 y anteriores tienen un problema cuando se utiliza la propiedad de posición. Si un elemento contenedor (en este caso <div class = "contenedor">) ancho especificado ,! declaración DOCTYPE no está presente, IE8 y versiones anteriores se sumará un margen de 17px a la derecha. Esto parece ser un espacio de reserva rodante. Cuando se utiliza la propiedad de posición siempre se establece en la declaración DOCTYPE!

Ejemplos

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Trate »

El uso de la propiedad float a izquierda, alineado a la derecha

El uso de la propiedad float es uno de los métodos elemento de alineación:

Ejemplos

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Trate »

Crossbrowser problemas de compatibilidad

Elementos alineados de esta manera, el margen y el relleno elemento predeterminado es siempre una buena idea. Esto es para evitar diferencias visuales en diferentes navegadores.

IE8 y anteriores tienen un problema cuando se utiliza la propiedad float. Si un elemento contenedor (en este caso <div class = "contenedor">) ancho especificado ,! declaración DOCTYPE no está presente, IE8 y versiones anteriores se sumará un margen de 17px a la derecha. Esto parece ser un espacio de reserva rodante. Cuando se utiliza la propiedad float siempre se establece en la declaración DOCTYPE!

Ejemplos

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Trate »