"vertical-align: middle" ne s'aligne pas sur le milieu dans Firefox
J'essaie d'aligner du texte de différentes tailles verticalement, cependant, Firefox affiche le texte plus petit au-dessus du milieu.
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>
Capture D'écran: capture d'écran http://www.doheth.co.uk/files/valign.jpg
UPDATE : juste pour être clair, je suis plus ou moins conscient du fonctionnement de vertical-align, c'est-à-dire que je connais déjà les idées fausses communes.
De plus d'enquête, il semble que le moyen le plus simple de résoudre ce problème est de enveloppez le texte plus grand dans un span et définissez vertical-align sur cela aussi. Les deux enfants de .categoryLinks s'alignent alors l'un par rapport à l'autre. À moins que quelqu'un puisse montrer un meilleur moyen sans balisage supplémentaire?
5 réponses
L'alignement Vertical ne fonctionne que comme prévu sur les cellules de table ou les éléments de bloc en ligne. Si vous voulez plus d'informations, je vous suggère de lire Understanding vertical-align, ou "Comment (pas) centrer verticalement le contenu".
Edit: vous avez quelque chose d'autre parce que cela fonctionne pour moi comme sur Firefox. J'ai même laissé tomber la taille de la police de la SECTION: juste en bas et elle est toujours centrée. Avez-vous utilisé Firebug pour voir quels autres CSS l'affectent?
Cela fonctionne comme est:
<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>
Remarque: la taille de la police de la section a été changée en 0.4 em à partir de 0.6 em d'origine pour souligner le point.
Firefox est rendu correctement. La propriété vertical-align est inline, ce qui signifie qu'elle ne s'applique pas aux éléments de bloc comme
, etc.). Essayez d'ajouter display: inline et voir si cela fonctionne.
L'alignement Vertical est uniquement censé s'appliquer aux éléments de bloc en ligne (je pense que les images sont les seules choses qui ont cette propriété de mise en page par défaut), donc pour l'utiliser pour positionner un élément en ligne, transformez-le d'abord en un bloc en ligne, puis vous pouvez utiliser margin et padding pour le positionner]}
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;
}
Vous devez le modifier un peu pour firefox 2, mais c'est à cause d'un exemple raer de firefox ne supportant pas les standards web. Sur d'autre part, vous ne pouviez pas vous soucier du tweak car peu de gens utilisent encore ffx2, et ce n'est qu'un défaut de conception très mineur.
J'ai corrigé ce problème en supprimant simplement:
white-space: nowrap;
De parent div. Je ne sais pas pourquoi mais avec cette règle ajoutée, Firefox n'applique pas le:
vertical-align: middle;
J'ai eu le même problème. Cela fonctionne pour moi:
<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>