Centrage d'élément dans le flux au sein de leur conteneur :
- Centrage vertical en utilisant , au niveau des éléments à centrer, display:inline-block; et un correctif pour IE7- (display:inline;) et vertical-align:midle;
- Centrage horizontal en utilisant, au niveau du conteneur, text-align:center;
- Nécessité de donner une largeur aux éléments à centrer.
Centrage vertical
exemple 1 : textes avec les mêmes propriétés
Ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate ullamco laboris nisi duis aute irure dolor.
Ullamco laboris nisi excepteur sint occaecat velit esse cillum dolore.
exemple 2 : textes avec des propriétés différentes
Ut labore.
Ullamco laboris.
exemple 3 : balise image et texte
Ullamco laboris nisi excepteur sint occaecat velit esse cillum dolore.
exemple 4 : image sprite en background et texte
Ullamco laboris nisi excepteur sint occaecat velit esse cillum dolore.
Inconvénients de ce centrage
- les hauteurs des éléments centrés dépendent de leur contenu respectif. Elles varient donc suivant les éléments.
- Deux textes courts sur une seule ligne sont centrés donc leur baseline ne l'est pas.
Voir les tests de centrage vertical sur une unique ligne
Centrage vertical et horizontal
exemple 1
Ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate ullamco laboris nisi duis aute irure dolor.
Ullamco laboris nisi excepteur sint occaecat velit esse cillum dolore.
exemple 2
Ut labore.
Ullamco laboris.
exemple 3
Ullamco laboris nisi excepteur sint occaecat velit esse cillum dolore.
exemple 4
Ullamco laboris nisi excepteur sint occaecat velit esse cillum dolore.
Positionnement horizontal de blocs initialement centrés
déclinaison d'exemples à partir de l'exemple 2
Avantages : solution permettant tous types de positionnement horizontaux en jouant sur les propriétés width, margin, text-align des éléments à centrer et le padding du parent.