Alineación de CSS (Alineación de elementos)

CSS tiene varias propiedades que se pueden usar para alinear elementos en la página web.

Alineación de texto

A través de la configuración correctaAlineación de texto，para alinearBloqueoTexto dentro del elemento.

h1　{
　　　　text-align:　center;
}
p　{
　　　　text-align:　left;
}

ConsulteCSS TextTutoriales, para obtener más información sobre el formato de texto.

Centrar usando la propiedad margin

BloqueoEl alineamiento del centro del elemento es uno de los significados más importantes de la propiedad margin en CSS. Por ejemplo, al establecer los márgenes laterales en auto, se puede alinear horizontalmente al centro el contenedor <div>.

div　{
　　　　width:　50%;
　　　　margin:　0　auto;
}

Las reglas de estilo en el ejemplo anterior alinean horizontalmente al centro el elemento.

Alinear elementos usando la propiedad position

CSS positionAl usar las propiedades left y right junto con, se puede alinear el elemento en relación con la ventana de vista del documento o el contenedor padre. righttopbottom

.up　{
　　　　position:　absolute;
　　　　top:　0;
}
.down　{
　　　　position:　absolute;
　　　　bottom:　0;
}

Para obtener más información sobre la posición de los elementos, consulteCSS定位Tutoriales.

Alinear a izquierda y derecha usando la propiedad float

CSSfloatLa propiedad se puede usar para alinear los componentes de su contenedor a la izquierda o derecha de la manera que otros contenido puede fluir a lo largo de sus lados.

Por lo tanto, si un elemento flota a la izquierda, el contenido fluirá a su derecha. Por el contrario, si un elemento flota a la derecha, el contenido fluirá a su izquierda.

div　{
　　　　width:　200px;
　　　　flotar: izquierda;
}

Limpiar flotación

Uno de los aspectos más confusos al usar una disposición basada en flotación es el contenedor colapsado. El elemento padre no se estira automáticamente para contener al elemento flotante. Sin embargo, si el contenedor no contiene ningún fondo o borde perceptible visualmente, esto no siempre es obvio, pero es importante prestar atención y manejarlo para evitar problemas de disposición extraños y problemas de compatibilidad entre navegadores. Vea la siguiente imagen:

Verá

Los elementos no se expanden automáticamente para contener la imagen flotante. Puede resolver este problema eliminando la flotabilidad después del elemento flotante en el contenedor, pero antes de la etiqueta de cierre del elemento contenedor.

Arreglar el padre plegable

Hay varias formas de resolver el problema del padre plegable de CSS. La próxima sección le presentará estas soluciones y ejemplos en tiempo real.

Solución1Flotar el contenedor

La forma más sencilla de resolver este problema es flotar el elemento padre que contiene.

.container {
　　　　flotar: izquierda;
　　　　fondo: #f2f2f2;
}

Solución2Usar Div vacío

Es un método antiguo, pero es una solución simple que se puede usar en todos los navegadores.

.clearfix {
　　　　clear: ambos;
}
/*　Fragmento de código html　*/

También puede realizar esta operación mediante etiquetas. Sin embargo, no se recomienda este método, ya que agregará código no semántico a la marca.

Solución3Usar el pseudoelemento :after

El :after Elemento pseudoCon la unióncontentLa propiedad ya se ha utilizado bastante para resolver problemas de flotabilidad.

.clearfix:after {
　　　　content: ".";
　　　　display: bloque;
　　　　height: 0;
　　　　clear: ambos;
　　　　visibility: oculto;
}

La clase .clearfix es aplicable a cualquier contenedor que tenga hijos flotantes.