Centrer un bloc en css
Marges négatives
Il est possible de spécifier la position centrée d'un élément, (image ou bloc) d'une manière
"négative"
pour un rendu plutôt positif (ahem) à l'aide de la propriété
position: absolute;
(pour le sortir du
flux courant de la page) et quelques petites finesses comme les marges négatives (
margin-left
) à -200px par exemple. Le codeur est un être subtil...
Margin : marge externe au bloc ou à l'image
Padding : marge interne au bloc ou à l'image
- il faut imperativement connaître la taille exacte du bloc à positionner, on entend par taille exacte, sa hauteur et sa largeur en pixels.
- utiliser margin
- coordonnées top et left
Exemple
Voir un
bloc centré.
Mise en application
Dans un premier temps, il faut placer le coin supérieur gauche bien au centre de la page ou du bloc parent (le conteneur).
Pour ce faire, take it easy, on le place à moitié de la hauteur et à moitié de la largeur (top:50%; et left:50%;) :
top
représente la
coordonnée du bord haut d'un élément,
left
représente la coordonnée du bord gauche dudit élément.
Code CSS :
.margeneg{
position: absolute;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -100px;
}
Pour ne traiter que le centrage horizontal, on ne conserve que left et margin-left.
Et Oh Mirâcle... pour le centrage vertical, on ne conserve que top et margin-top.
Ici, left place la bordure gauche de l'élément à 50% de la taille du bloc parent. Il en
va de même pour la bordure haute située à 50% de la hauteur du bloc conteneur.
Coordonnées
Les coordonnées d'images ou de bloc sont toujours indiquées en commençant par l'abcisse puis l'ordonnée (x,y).
Ainsi, dans la feuille css, si vous rencontrez ceci
background-position: 50% 0%;
cela
signifie que l'image d'arrière plan est située à 50% de la taille horizontale de son bloc parent, et à 0% du bord haut.
NB : l'avantage des pourcentages par rapport aux pixels, est de pouvoir positionner son bloc comme on le souhaite sans
avoir à se préoccuper de la résolution de l'écran du visiteur. On est ainsi sûr que l'image, l'élément, le bloc, seront toujours positionnés au centre.
Si les coordonnées avaient été définies en pixels, l'élément centré pour une résolution en 1024 x 768 ne l'est plus lors d'une résolution en 1600 x 1200...
Lire
position bloc en css.