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.

© latarteauchips 2017
Volet automatique | Les amis des loisirs : Sorties spectacles paris| Chalet Vosges | Bioénergétique | Visites Paris |
artisan web
achat cash de votre mobile et recyclage telephone
Revendez vos mobiles chez Mister Reprise
Astuces & trucs
Css
Divertissement
Html
Javascript
Linux
Outils
Php
Scripts
Sécurité failles
setia industrie logo
Setia Industries
Valid XHTML 1.0 Strict