en la página es a menudo necesario para hacer la alineación central CSS vías: por ejemplo, para centrar la unidad principal.Hay varias soluciones a este problema, cada uno de los cuales tarde o temprano tendrán que utilizar cualquier codificador.
Alinear texto centrado
menudo con fines decorativos que desea establecer la alineación del texto del centro, CSS, en este caso, se reduce el momento de la imposición.Anteriormente, esto se hizo utilizando HTML atributos, ahora estándar requiere alinear texto mediante hojas de estilo.En contraste con el bloque para el que desea cambiar los márgenes exteriores, con la alineación del texto CSS en el medio se hace con una sola línea:
- text-align: center;
Esta propiedad se hereda y se pasa de padres a todos los niños.Afecta no sólo el texto, sino también a otros elementos.Para ello, deben estar en minúsculas (por ejemplo, el período) o línea-bloque (cualquier bloqueo que fija la pantalla de propiedad: bloque).Esta última opción también le permite cambiar el ancho y la altura de la configuración más flexible de la sangría.
A menudo las páginas alinear atributo a la propia etiqueta.Esto hace que inmediatamente el código no válido como W3C reconoció atributo align obsoleto.Su uso no está recomendado en la página.Bloque de alineación
en el centro
Si desea especificar la alineación del centro de la div, CSS puede ofrecer una manera bastante fácil: uso del margen de sangrado externo.El relleno se puede establecer como una serie de elementos a nivel de bloque y la línea-bloque.Svoysva valor debe establecerse en 0 (sangría vertical) y concesionarios (guiones horizontales automáticas):
- margin: 0 auto;
Ahora esta opción se reconoce como absolutamente válida.El uso de acolchado externo también permite especificar la alineación del centro: propiedad CSS margen nos permite resolver muchos problemas asociados con el elemento de posicionamiento en la página.Bloque
Alinear en el borde izquierdo o derecho
A veces no se requiere la alineación central CSS-camino, pero hay que poner dos unidades junto a uno desde el lado izquierdo y el otro - desde la derecha.Por esta propiedad hay un flotador, que puede tomar uno de tres valores: izquierda, derecha, o ninguno.Digamos que usted tiene dos unidades que deben reunir.A continuación, el código será:
- .Left {float: left;}
- .RIGHT {float: right}
Si hay una tercera unidad, que debe ser colocado bajo los dos primeros bloques (por ejemplo, el pie de página), éldebe registrar la propiedad clara:
- .left {float: left;}
- .RIGHT {float: right}
- pie de página {clear: both} hecho
que los bloques con las clases de la izquierda y caída a la derecha del totalflujo, es decir, todos los demás elementos ignoran la existencia de elementos alineados.La propiedad clear: both permite que el pie de página o cualquier otra unidad para ver bajó de los elementos de flujo y prohíbe la envoltura (float) tanto en la izquierda y la derecha.Por lo tanto, en nuestro ejemplo, el pie de página se desplazará hacia abajo.Alineación
Vertical
Hay casos en alineación central conjunto insuficiente CSS-formas, todavía se debe cambiar la posición vertical del bloque infantil.Cualquier línea o línea-bloque de elemento puede ser presionado contra el borde superior o inferior, situada en el centro del elemento padre, o sea, en cualquier lugar.Más a menudo requieren la alineación de la caja en el centro, este atributo se utiliza vertical-align.Supongamos que hay dos unidades, una dentro de otra.La unidad interna - elemento de línea-bloque (display: inline-block).Es necesario alinear la unidad infantil verticalmente: alineación
- en el límite superior - .child {vertical-align: top};Centro
- alineación - .child {vertical-align: media};Alineación
- en el extremo inferior - .child {vertical-align: parte inferior};
en elementos a nivel de bloque o text-align o vertical-align no aplicarse.
Posibles problemas con unidades alineadas
veces div align el centro de la CSS vías puede causar problemas menores.Por ejemplo, el uso de flotador, por ejemplo, hay tres bloques: .En primer lugar, .SECOND y .third.El segundo y tercer bloques se encuentran en la primera.Un elemento con una clase de segundo bloque alineado a la izquierda, y el último - de la derecha.Después de alinear los dos cayeron fuera de la corriente.Si el padre no se define la altura (por ejemplo, 30em), ya no se estirará la altura de las unidades auxiliares.Para evitar este error, utilice el "espaciador" - una unidad especial, que ve .SECOND y .third.CSS-código:
- .SECOND {float: left}
- .third {float: right}
- .clearfix {height: 0;clear: both;}
seudo utiliza a menudo: después, lo que también le permite regresar a los bloques en su lugar mediante la creación de psevdorasporki (en este ejemplo en un div con una clase de contenedor se encuentra dentro de la .First y contiene .left y .RIGHT):
- .izquierda {float: left}
- .RIGHT {float: right}
- .container: after {content: '';display: table;clear: both;}
anteriormente opciones - el más común, aunque hay algunas variaciones.Siempre se puede encontrar la manera más fácil y más conveniente para crear psevdorasporki por los experimentos.
Otro problema de diseño se encuentra con frecuencia - la alineación de los elementos de alineación de bloque.Después de cada una de ellas el espacio añadido automáticamente.Para hacer frente a este margen ayuda propiedad, que se define por la indentación negativo.Hay otros métodos que se utilizan con menos frecuencia, por ejemplo, al restaurar el tamaño de fuente.En este caso, las propiedades de la matriz prescrito font-size: 0.Si se encuentra dentro de los bloques de texto, las propiedades de los elementos de línea de bloques han regresado al tamaño deseado.Por ejemplo, font-size: 1em.El método no siempre es conveniente, opción con márgenes externos de manera mucho más frecuente.Bloque de alineación
permite crear diseño de página hermoso y funcional y es el diseño general y la ubicación de las mercancías en las tiendas, y fotos en un sitio web pequeño.
