Comment aligner verticalement des éléments cross-browser?

Question

Je fais l'alignement vertical en utilisant la propriété vertical-align: middle son travail dans Chrome mais pas dans IE.

Answer 1

Supposedly, IE8 + prend en charge vertical-align mais le support IE7 est buggé. Pour les anciens navigateurs, vous pouvez essayer de définir le CSS du conteneur de l'élément sur top: 50% ou top: -50%.

Answer 2

Si vous voulez placer un texte d'une ligne, par exemple un titre d'en-tête dans votre boîte, que d'utiliser line-height

Par exemple, avec une boîte de largeur 200px et 40px hauteur:

.the_box{ 
width: 200px; 
height: 40px; 
line-height: 40px; 
} 

Il est facile , élégant et multi-navigateur. Si vous avez un texte plus long que 200px, cette méthode ne fonctionnera pas.

Answer 3

Mettre

style="valign:middle; vertical-align:middle;" 

Les nouvelles versions de IE choisir valign:middle et ignorer vertical-align:middle. Tous les autres navigateurs comme Firefox, Chrome, Safari, etc. vont choisir vertical-align:middle et ignorer valign:middle.

Answer 4

J'ai eu un problème similaire

J'ai eu la

suivante

<div> 
    <span> some text </span> 
</div> 

Ce fut tout un en-tête d'une table.

j'ai pu contourner ce problème en ajoutant ce qui suit à la durée

<div> 
    <span style="position: absolute; padding-top:1px;"> some text </span> 
</div> 

Answer 5

J'ai aussi eu ce problème, avec une table civile un de mes collègues créé. Le calendrier était bien vu dans Chrome, Firefox, mais le texte de la date était à moitié coupé dans le coin supérieur gauche de chaque jour. J'ai enlevé la propriété d'alignement vertical et l'ai remplacée par la position. Voir ci-dessous.

CSS d'origine:

.dayText { 
    vertical-align: text-bottom; 
} 

Mon CSS Fix:

.dayText { 
    position: relative; 
    top: 10px; 
    left: 0px; 
    height: inherit; 
} 

Answer 6

Il suffit d'ajouter ceci: display: table-cell;