centrer

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%);
}

 

Centrer un svg dans son container

Par défaut, les svg sont des éléments en ligne.

CSS
1
2
3
4
div {
display: block;
margin: auto;
}

Il suffit donc de changer leurs types et ainsi nous pouvons les centrer facilement.

 
Réalisé par M.Defachelle.