css ¿Por qué no funciona agregar vertical-align: middle to span?
¿Qué significa alineación vertical? ¡Primero demos un ejemplo!
¿Por qué el texto de este elemento html no puede estar centrado verticalmente?
dddddddda
Lo probé con el navegador y mostró la imagen. es el siguiente:
La declaración de alineación vertical se explica en muchos documentos chinos como "determinar la visualización del elemento en la posición vertical". Tiene los siguientes parámetros: baseline?|?sub?|? super?|?top ?|?text-top?|?middle?|?bottom?|?text-bottom?|?
baseline: Alineado con la línea base del elemento.
medio: Alinear con el medio del elemento.
sub: La palabra se hunde.
súper: la palabra sube.
text-top: Alinea el texto en la parte superior.
text-bottom: Alinea el texto en la parte inferior.
arriba: Alineado con el elemento más alto de esta fila.
Abajo: Alineado con el elemento más bajo de esta fila.
Si entiendes vertical-align:middle literalmente, debería ser el texto en el centro de la posición vertical del elemento. Cuando se inserta en la etiqueta anterior, su posición debe estar en el centro de un cuadro. con una altura de 60px ah. Pero este no es el caso.
Si este vertical-align:middle se usa para definir una celda td, entonces funciona como imaginas, mira el siguiente ejemplo
onmouseout="this.style.verticalAlign ='middle '"> texto?a?alinear?
A través Al pasar el mouse sobre y fuera de eventos, cambiamos dinámicamente la posición de alineación vertical del texto, y funciona como lo hizo usted. En la documentación de msdn, descubrí que se puede usar para elementos de extensión, pero no hay una explicación detallada de cómo funciona la alineación vertical.
Más tarde, revisé "Referencia del programador CSS20" (Nota 1). La sección Modelo de diseño en línea de la página 12 explica el modelo de diseño en línea. Aquí tenéis un diagrama del modelo. Este texto explica que en una línea de diseño de texto, la alineación vertical se utiliza para afectar la alineación de diferentes elementos.
El W3C explicó oficialmente la alineación vertical de la siguiente manera:
¿Esta?propiedad?afecta?el?posicionamiento?vertical?dentro?de?un?cuadro?de?línea?de?los?cuadros?generados? ?por?un?elemento?de nivel en línea.
En realidad, un cuadro consta de muchas filas y muchos elementos la alineación vertical solo actúa sobre los elementos de la misma fila. Su verticalidad no es relativa a la totalidad. Caja. El intervalo anterior define una altura de 60 px, pero hay muchas líneas en el cuadro de este intervalo y el texto no se puede alinear con el centro del intervalo. Por lo tanto, si desea que ese fragmento de texto esté alineado con la línea media del tramo, debe definir un atributo de altura de línea para ello. Deje que la altura de línea sea de 60 px. La alineación vertical que actúa sobre una línea funcionará. como quieras.
Debido a que las celdas de la tabla son elementos dentro de una fila, la alineación vertical funciona de acuerdo con nuestras ideas, pero este no es el caso en span.
Nota 1. "Referencia del programador CSS20", autor Eric A. Meyer, un manual de referencia de programación CSS20.
Si te ayuda, ¡acepta mi respuesta!