TP : centrage des éléments

Ce TP va vous permettre d'explorer en autonomie le problème de centrage des éléments en-ligne ou bloc.

On demande à chaque étape de reprendre le code de la zone de saisie et de le compléter pour obtenir l'effet visuel présenté et commenté.

Les corrigés sont disponibles sur demande.

I Centrer horizontalement à l'intérieur d'un bloc

Ajouter un ordre css afin de centrer la fleur au centre du bloc vert comme ci-dessous :

corrige1

II Centrer verticalement à l'intérieur d'un bloc

1ère méthode , en utilisant "table-cell" et ? (compléter le source suivant)

corrige2

2ème méthode , pour les navigateurs IE7 et précédent, en utilisant "line-height" et ? (compléter le source précédent)

corrige3

III Centrer un bloc horizontalement

Cette fois, la propriété tex-align ne fonctionne pas car elle est réservée pour centrer les éléments in-line.

1ère méthode

La solution standard consiste à fixé la largeur du bloc et à proposer des marges latérales automatiques

corrige4

2ème méthode de secours si la précédente ne fonctionne pas sur d'anciens navigateurs

Cette solution repose sur le positionnement relatif du conteneur et absolu du bloc intérieur. On placera alors le bloc interieur avec un left de 50% puis on compensera le décalage trop à droite par une marge gauche négative.

corrige5

IV Centrer un bloc verticalement

1ère méthode : c'est la reprise du centrage vertical pour un élément in-line (table-cell et vertical-align) mais qui bogue sur les anciennes versions de IE.

corrige6

2ème méthode : transposition à l'identique de la méthode de centrage horizontale à l'aide des éléments positionnés relatif et absolu et une marge négative (compléter le code précédent)

corrige7