28172 sujets

CSS et mise en forme, CSS3

Margin auto qui marche a tout les coups

Bonjour,

jeune développeur HTML CSS, il m'arrive régulièrement d'essayer de mettre des Margin (ou padding) auto qu'ils soit horizontale ou verticale mais qui ne marche pas.

Je n'ai pas d'exemple précis d'un code qui ne marchait pas, mais j'aurais voulu savoir qu'elles sont les conditions minimum requise pour faire marcher un margin/padding auto

Merci beaucoup Smiley smile
salut,
il faut déjà savoir qu'un padding auto n'existe pas (à ma connaissance) tout comme des marges automatiques verticales (il faut passer par un "vertical-align" et c'est une autre histoire).
Les marges automatiques s'appliquent aux éléments autres que les type enlignes (ou dont le comportement a été rendu autre que celui-ci via "display") en incluant aussi les inline-block et tout les table- et ces éléments doivent être dans le flux (i.e pas en position absolue ni flottants).
Je pense qu'il y a une section sur ce site même parlant de centrage d'éléments en CSS. Le mieux serait de la lire pour les détailles complets.
humm intéressant. Ça fait assez longtemps que je me dis que je devrais me pencher le "display:flex" mais l'absence de prise en charge répandue m'en dissuadait (absence de moins en moins conséquente). C'est peut être le moment ^^
@zelalsan Une autre aplication des marges verticales à auto est le centrage d'un élément en absolut pour peu que les 2 propriétés top et bottom aient une valeur différente de auto et que le height soit défini ou intrinsèque (comme une image par exemple). C'est d'ailleurs aussi valable pour le centrage horizontal.

w3c css 2.1 a écrit :
If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.

If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values.

C'était déjà défini à peu près en ces termes avant la révision, donc en 1998, sauf qu'il aura fallu attendre que IE l'applique (7 pour la prise en compte de top et bottom conjointement spécifiés et le 8 pour le centrage en marge auto, du moins d'après le moteur de rendu IE8 d'IE11).

Exemple:

<body>
  <img src="http://cdn.alsacreations.net/css/img/logo-alsacreations-com.png">
</body>


img {
  position:absolute;
  margin:auto;
  top:0;bottom:0;right:0;left:0;
}


A noter qu'en remplaçant l'image par un élément en display:table on a un magnifique exemple d'une interprétation différente suivant le navigateur: FF (uniquement centrage horizontal), IE (aucun centrage) et ceux basés sur webkit (uniquement centrage vertical) ^^
Sujet clos
Aller à