Lo que no sabes sobre la alineación vertical
Hay algunas cosas que usamos a menudo, pero no entendemos sus principios, por lo que una vez que cambia la escena, no sabemos cómo usar muchas cosas. Últimamente me he estado preguntando acerca de la alineación vertical, porque ya sea para alinear elementos verticalmente o eliminar espacios en bloques en línea, siempre podemos usarlo, pero no sabemos por qué. Con actitud inquisitiva, hoy encontré un buen artículo en Internet. Desafortunadamente, está en inglés. El blogger no domina el inglés y me duele la cabeza cuando lo leo en inglés. en Inglés. Vamos, pasé una tarde traduciendo. Aunque fue desgarrador, sentí que me beneficié mucho. Si hay alguna traducción inapropiada en el artículo, corríjame.
Xiaoer, el enlace original: Alineación vertical: todo lo que necesitas saber
A menudo necesitamos alinear algunos elementos que están dispuestos uno al lado del otro en la dirección vertical.
CSS nos proporciona algunos métodos de implementación. A veces uso float, a veces uso position:absolute y, a veces, incluso agrego márgenes internos y externos manualmente.
No me gustan estos métodos. Los flotadores sólo se pueden alinear con su parte superior y deben limpiarse manualmente. El posicionamiento absoluto elimina elementos del flujo de documentos para que no puedan afectar a los elementos circundantes. Hablemos del uso de márgenes internos y externos fijos, lo que de repente provocará cambios débiles.
Hay otro método confiable aquí, y es vertical-align. Técnicamente hablando, el uso de alineación vertical para el diseño es una "tecnología negra" porque no se inventó para este propósito. vertical-align se utiliza para alinear el texto y los elementos inmediatamente adyacentes a él. No obstante, puede utilizar la alineación vertical para realizar una alineación flexible y sutil de elementos en diferentes escenarios, y no necesita conocer las dimensiones específicas de los elementos.
Sin embargo, la alineación vertical puede resultar realmente frustrante a veces. Parece tener algunos secretos ocultos. Por ejemplo, a veces, si configura la alineación vertical en algunos elementos, encontrará que su alineación no ha cambiado, pero otros elementos en la misma fila sí. A menudo lloro en el baño alineado verticalmente.
Desafortunadamente, la mayor parte de la información al respecto es superficial. En particular, si busca introducciones a la alineación vertical sobre el diseño, la mayoría le brinda información incorrecta: la alineación vertical puede controlar la disposición vertical de todos los elementos dentro de un elemento. Siempre ofrecen las aplicaciones de escenarios más básicas, pero nunca introducen situaciones complejas.
Así que me propuse la tarea de comprender todo el conocimiento sobre la alineación vertical a la vez. Leí la descripción CSS del W3C y luego hice algunos experimentos por mi cuenta. El resultado es este artículo.
Entonces, comprendamos juntos las reglas del juego.
vertical-align se utiliza para alinear elementos de nivel en línea. El atributo de visualización de un elemento de nivel en línea tiene uno de los siguientes valores:
Un elemento en línea es una etiqueta básica que envuelve texto.
El elemento de bloque en línea, como su nombre indica, es un elemento de bloque que existe en línea. Pueden establecer el ancho y el alto, los márgenes internos y externos y los bordes.
Los elementos de nivel en línea son elementos dispuestos uno al lado del otro en una fila. Una vez que todos los elementos no quepan en una fila, se creará una nueva fila a continuación. Todas las líneas tienen algo llamado cuadro de línea, que se utiliza para envolver todo el contenido de esta línea.
La altura del cuadro de línea se determina en función de la altura de todo el contenido dentro de una línea. Como se muestra en la siguiente figura: los bordes superior e inferior del cuadro de líneas están marcados con líneas rojas. (Los bordes del cuadro de líneas suelen ser invisibles y están dibujados para facilitar la comprensión de los lectores)
El punto más crítico para comprender la alineación vertical es comprender la línea base de los elementos relacionados. En algunas escenas, los bordes superior e inferior de los elementos también son cruciales. Ahora echemos un vistazo a dónde están las líneas de base y los bordes superior e inferior de diferentes elementos.
La línea base de un elemento en línea es la línea debajo del carácter. Específicamente la línea azul en la imagen. En términos generales, la línea base es la línea debajo de la línea central de la fuente. Si desea obtener más información al respecto, consulte la descripción detallada del W3C
Agregué los bordes superior e inferior (líneas verdes) y la línea de base (línea azul). También agregué un color de fondo (gris) al elemento de texto.
El cuadro de línea tiene un borde superior que está alineado con el borde superior del elemento más alto de la línea y también tiene un borde inferior que está alineado con el borde inferior del elemento más bajo de la línea; . Estos dos bordes son las líneas rojas en la imagen.
La línea base del cuadro de líneas cambia:
Esta es probablemente la parte más confusa. Esto significa que la línea base del cuadro de líneas cambiará dinámicamente según ciertas reglas.
Dado que la línea base del cuadro de líneas es invisible, no se puede saber exactamente dónde está. Pero hay una forma sencilla de saber dónde está. Simplemente agregue un carácter al comienzo de una línea de contenido. Por ejemplo: agregué una "x" (la gris al comienzo de la línea). Si el carácter no está alineado de ninguna manera artificial, su línea base estará en la línea base del cuadro de líneas de forma predeterminada.
El espacio alrededor de la línea base del cuadro de línea se puede llamar cuadro de texto. Puede pensar en el cuadro de texto como un elemento en línea sin ninguna alineación dentro del cuadro de línea. Su altura es igual al tamaño de fuente del elemento principal. Por lo tanto, el cuadro de texto se utiliza para ajustar el texto en el cuadro de línea sin ninguna alineación. La parte entre las líneas verdes de la imagen es el cuadro de texto. Dado que el cuadro de texto está estrechamente conectado a la línea base, se moverá a medida que se mueva la línea base. (En la descripción del W3C, el cuadro de texto se llama strut)
Ahora que conocemos todos los puntos de conocimiento preparatorios, hagamos un resumen:
Podemos usar vertical-align para Haga lo anterior. Los puntos de referencia que introdujimos (línea de base, borde de la línea superior, etc.) se establecen en una relación definida.
Dividido principalmente en dos situaciones:
Las siguientes dos situaciones son en realidad una alineación relativa a la línea base de line-box, porque text-box La parte superior e inferior Los bordes también dependen de la línea de base.
Ahora podemos estudiar la alineación vertical con más detalle en escenarios específicos. En particular, abordaremos algunas preguntas comunes.
Un problema que me ha estado molestando durante mucho tiempo: cuando quiero alinear al centro un ícono y el texto al lado, simplemente usar vertical-align: middle en el ícono no parece funcionar. alinee los dos al centro.
Echemos un vistazo al siguiente ejemplo:
La siguiente imagen sigue siendo el mismo ejemplo, pero he agregado algunas anotaciones para ayudar a comprender estas líneas es todo de lo que hemos hablado. Acerca de antes:
Un inconveniente importante de usar alineación vertical es que la posición de la línea base del cuadro de líneas se ve afectada por todos los elementos dentro de él. Suponemos una situación en la que un elemento está alineado con respecto a la línea base del cuadro de línea. Luego, cuando la posición de la línea base del cuadro de línea cambia, la posición del elemento también cambiará.
Veamos algunos ejemplos:
Cuando configuramos otros valores de alineación vertical para este elemento más alto, ocurrirá el mismo comportamiento.
Echa un vistazo al siguiente ejemplo. Por lo general, ocurre la siguiente situación cuando desea alinear los elementos li verticalmente.
Como puede ver, el elemento li en realidad está alineado con la línea base de forma predeterminada. Hay una porción de espacio en blanco debajo de la línea base. Este espacio en blanco puede acomodar la mitad del espacio "x". Esto da como resultado la existencia de lagunas. ¿Cómo solucionarlo? Podemos cambiar la posición de la línea base, por ejemplo, establecer la alineación en alineación vertical para el elemento li: medio
Esta situación no sucederá con los elementos de bloque en línea que contienen contenido de texto, porque el contenido de texto ya ha movido la línea de base La posición se eleva.
Este problema se debe principalmente a problemas con los propios elementos de nivel en línea. Pero como esta situación también afecta la alineación vertical, es mejor que la comprendamos.
Al igual que el ejemplo anterior, este también está causado por huecos. Esta brecha proviene principalmente de los espacios entre elementos en línea. Todos los espacios entre elementos en línea se combinarán en un solo espacio. Si desea que dos elementos en línea aparezcan uno al lado del otro con ancho: 50, entonces este espacio es un obstáculo. No hay suficiente espacio en una línea para dos anchos: 50 y un espacio. Entonces se elimina el elemento de la derecha. Para eliminar huecos, hay que eliminar espacios.
Eso es todo. No parece tan complicado una vez que conoces las reglas. Si vertical-align no le escucha la próxima vez, simplemente haga las dos preguntas siguientes:
Creo que la pregunta será respondida pronto.
Este es el final, no sé cuántas personas podrán leerlo con paciencia...