Centrage des éléments en CSS
CHAPITRE 8
133
Les techniques d’alignement présentées ici ne fonctionnent pas correctement sur
tous les navigateurs. On ne recourra donc aux centrages horizontaux (et surtout verticaux) qu’avec parcimonie.
Dans le cadre spécifique d’un centrage vertical, soyons tout à fait honnête : en raison du
manque de conformité d’Internet Explorer, les méthodes de centrage vertical en CSS
se révèlent complexes et délicates. La solution la plus robuste et souvent la plus accessible demeure la classique cellule de tableau, dont le centrage vertical pourra alors être
appliqué à l’aide de la propriété vertical-align, même sur Internet Explorer !
Application pratique
height: 50px;
line-height: 50px;
margin-top: -25px;
background: #ccc;
}
INCOMPATIBILITÉ Marges négatives dans IE 5 pour Mac
Les marges verticales négatives fonctionnent mal sur Internet Explorer 5 pour Mac. On pourra ignorer ce
problème : c’est un navigateur ancien, qui n’est plus guère utilisé.
Reprenons le projet de site portant sur l’Alsace. Voici le code HTML résultant des
étapes précédentes :
CHAPITRE 8
133
Les techniques d’alignement présentées ici ne fonctionnent pas correctement sur
tous les navigateurs. On ne recourra donc aux centrages horizontaux (et surtout verticaux) qu’avec parcimonie.
Dans le cadre spécifique d’un centrage vertical, soyons tout à fait honnête : en raison du
manque de conformité d’Internet Explorer, les méthodes de centrage vertical en CSS
se révèlent complexes et délicates. La solution la plus robuste et souvent la plus accessible demeure la classique cellule de tableau, dont le centrage vertical pourra alors être
appliqué à l’aide de la propriété vertical-align, même sur Internet Explorer !
Application pratique
height: 50px;
line-height: 50px;
margin-top: -25px;
background: #ccc;
}
INCOMPATIBILITÉ Marges négatives dans IE 5 pour Mac
Les marges verticales négatives fonctionnent mal sur Internet Explorer 5 pour Mac. On pourra ignorer ce
problème : c’est un navigateur ancien, qui n’est plus guère utilisé.
Reprenons le projet de site portant sur l’Alsace. Voici le code HTML résultant des
étapes précédentes :
- Retour à l'accueil
- Présentation de la région
- Historique de l'Alsace
- Gastronomie locale
- Hôtels et gîtes
- Photographies
Bienvenue en Alsace
Une belle région française
[Paragraphe associé au sous-titre de niveau 2.]
