css - template - “Vertical-align: middle” no se alinea con el medio en Firefox
justify content css grid (5)
Estoy tratando de alinear verticalmente un texto de diferentes tamaños, sin embargo, Firefox muestra el texto más pequeño por encima del medio.
CSS:
div.categoryLinks {
margin: 1em 16px;
padding: 0 4px;
border-width: 1px 0;
border-style: solid;
border-color: #ece754;
background: #f7f5b7;
color: #a49f1c;
text-align: center;
font-size: 1.4em;
}
div.categoryLinks em {
font-size: 0.6em;
font-style: normal;
vertical-align: middle;
}
HTML:
<div class="categoryLinks">
<em>SECTION:</em>
Page One ·
Page Two ·
<a href="link">Page Three</a>
</div>
Captura de pantalla : captura de pantalla http://www.doheth.co.uk/files/valign.jpg
ACTUALIZACIÓN : para ser claros, soy más o menos consciente de cómo funciona la vertical-align , es decir, ya conozco los conceptos erróneos comunes.
De más investigación, parece que la forma más sencilla de solucionar este problema es envolver el texto más grande en un span y establecer vertical-align en eso también. Los dos hijos de .categoryLinks se alinean entre sí. ¿A menos que alguien pueda mostrar una mejor manera sin margen adicional?
Firefox se está procesando correctamente. La propiedad vertical-align está en línea, lo que significa que no se aplica a elementos de bloque como <div> (y <p>, etc.). Intenta agregar display: inline y ver si funciona.
La alineación vertical solo funciona como se espera en celdas de tabla o elementos de bloque en línea. Si desea obtener más información, le sugiero que lea Comprender la alineación vertical o "Cómo (no) centrar verticalmente el contenido" .
Edición: Tienes algo más en marcha porque eso me funciona a mí como lo es en Firefox. Incluso bajé el tamaño de fuente de la SECCIÓN: hacia abajo y aún está centrado. ¿Has usado Firebug para ver qué otro CSS lo está afectando?
Esto funciona como es:
<html>
<head>
<style type="text/css">
div.categoryLinks {
margin: 1em 16px;
padding: 0 4px;
border-width: 1px 0;
border-style: solid;
border-color: #ece754;
background: #f7f5b7;
color: #a49f1c;
text-align: center;
font-size: 1.4em;
}
div.categoryLinks em {
font-size: 0.4em;
font-style: normal;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="categoryLinks">
<em>SECTION:</em>
Page One ·
Page Two ·
<a href="link">Page Three</a>
</div>
</body>
Nota: el tamaño de fuente de la sección cambió a 0.4em desde el original 0.6em para enfatizar el punto.
Se supone que la alineación vertical solo se aplica a los elementos del bloque en línea (creo que las imágenes son las únicas cosas que tienen esta propiedad de diseño por defecto), para usarlo para posicionar un elemento en línea, primero conviértalo en un bloque en línea, luego puede use el margen y el relleno para colocarlo de manera similar a como lo hace un elemento de bloque normal:
div.categoryLinks {
margin: 1em 16px;
padding: 0 4px;
border-width: 1px 0;
border-style: solid;
border-color: #ece754;
background: #f7f5b7;
color: #a49f1c;
text-align: center;
font-size: 1.4em;
}
div.categoryLinks em {
font-size: 0.6em;
display:inline-block;
vertical-align:top;
font-style: normal;
padding: 2px 0 0 0;
}
Sin embargo, tienes que modificarlo un poco para Firefox 2 , pero esto se debe a un ejemplo de Firefox que no es compatible con los estándares web. Por otro lado, no puedes molestarte con el ajuste ya que pocas personas todavía usan ffx2, y es solo un defecto de diseño muy pequeño.
Solucioné estos problemas simplemente eliminando:
white-space: nowrap;
de la div. No estoy seguro de por qué, pero con esta regla agregada, Firefox no aplica:
vertical-align: middle;
Yo tuve el mismo problema. Esto funciona para mí:
<style type="text/css">
div.parent {
position: relative;
}
/*vertical middle and horizontal center align*/
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>