“Vertical-align: middle” não se alinha ao meio no Firefox
https://stackoverflow.com/questions/732139
-
06-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu estou tentando alinhar um texto de diferentes tamanhos verticalmente, no entanto, o Firefox exibe a maneira como o texto menor acima da média.
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 tela:
(fonte: doheth.co.uk )
Atualizar :. Só para ficar claro, estou ciente de mais ou menos como funciona vertical-align, ou seja, eu já sei os equívocos comuns
De mais investigação, parece que a maneira mais simples de resolver este problema é para quebrar o texto maior em um span vertical-align e conjunto sobre isso também. Os dois filhos de .categoryLinks alinhe em relação ao outro. A menos que alguém pode mostrar uma maneira melhor, sem marcação extra?
Solução
Vertical align só funciona como esperado em células da tabela ou elementos inline-bloco. Se você quiser mais informações sugiro que leia Compreender vertical-align, ou "Como (não) para verticalmente Centro de conteúdo ".
Editar: Você tem algo mais acontecendo porque que funciona para mim como é no Firefox. Eu até cair o tamanho da fonte do SECÇÃO: baixo direito e ainda está centrado. Você já usou o Firebug para ver o que outros CSS está afetando ele?
Isso funciona como é:
<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:. tamanho da fonte seção alterado para 0.4em de 0.6em original para enfatizar o ponto
Outras dicas
O Firefox está rendendo corretamente. A propriedade vertical-align está em linha, o que significa que não se aplica aos elementos de bloco como
, etc). Tente adicionar display:. Em linha e ver se isso funciona
align Vertical só é suposto para aplicar aos elementos inline-bloco (eu acho que as imagens são as únicas coisas que têm esta propriedade de layout por padrão), de modo a usá-lo para posicionar um elemento inline, primeiro transformá-lo em um bloco de linha, então você pode usar margin e padding para posicioná-la semelhante à forma como você woudl um elemento de bloco 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;
}
Você tem que ajustá-lo um pouco para firefox 2 embora, mas isso é por causa de um exemplo RAER de firefox não apoiar padrões web. Por outro lado, você não poderia se preocupar com o tweak como algumas pessoas ainda usam ffx2, e é apenas uma falha de projeto muito menor.
Eu reparei isso apenas questões remoção:
white-space: nowrap;
de div pai. Eu não sei por que, mas com esta regra acrescentou, Firefox não se aplica a:
vertical-align: middle;
Eu tive o mesmo problema. Isso funciona para mim:
<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>
