css

Centrer verticalement un texte dynamique en CSS

Notre exemple à pour but de centrer un texte de façon vertical sans connaitre le nombre de caractère.

HTML :

XHTML
1
2
3
<div class="parent">
<p class="enfant"></p>
</div>

CSS :

CSS
1
2
3
4
5
6
7
8
9
.parent {
transform-style: preserve-3d;
}
 
.enfant {
position: relative;
top: 50%;
transform: translateY(-50%);
}

 

Appliquer un style CSS uniquement sur Internet Explorer 9

Pour une valeur négative:

CSS
1
2
3
.header{
top: ~'-60px\9\0';
}

Pour une valeur positive :

CSS
1
2
3
.header{
top: 60px\9\0;
}

! Fonctionne à conditions de placer le hack en dessous de votre code css.

 
Réalisé par M.Defachelle.