[résolu]Usage du margin pour centrer un bloc ?

Bonsoir à toutes et à tous,

vous connaissez tous les "margin" en css.
Pourquoi ne peut-on pas utiliser cette propriété pour centrer verticalement un bloc dans une page ?

Je précise ma pensé par l'usage de cette syntaxe là :

body { margin : auto; }

J'ai beau donner une dimension à "body", j'obtiens toujours le même résultat : centrage horizontal mais pas vertical.

Pourquoi ?

@+
Modifié par Artemus24 (01 Jun 2012 - 23:01)

Salut Artemus24,

Jette un oeil là dessus, ça devrait répondre à ta question :

Bonsoir hchtot,

désolé mais tu n'as pas bien compris ma question. Je ne cherche pas à centrer verticalement une boîte ou quoi que ce soit !

Je me pose simplement la question du : pourquoi cela ne fonctionne pas ?

Est-ce un bug ? Est-ce dû à une mauvaise déclaration ? Est-ce que le centrage vertical n'était pas prévu au départ ? Je ne sais pas répondre à cette question.

Pourtant on arrive à centrer horizontalement mais pas verticalement. C'est ça, ma question. Pourquoi peut-on faire le centrage horizontal mais pas le vertical.

@+

Bonjour à tous,
Petite réponse rapidos, je ne fais que passer

Artemus24 a écrit :
Est-ce un bug ? Est-ce dû à une mauvaise déclaration ? Est-ce que le centrage vertical n'était pas prévu au départ ? Je ne sais pas répondre à cette question.

Oui, je crois qu'une telle utilisation des marges automatiques n'était pas prévue au départ.

Les questions qui tournent autour de la hauteur des éléments, des blocs, du centrage vertical, de sites en hauteur fixe, etc., reviennent régulièrement… elles sont souvent dues à une incompréhension du média web. Je sais qu'il y a eu plusieurs fils de discussion sur le sujet ici, tu pourras sûrement trouver plus d'explications en faisant quelques recherches.

Grosso modo, le web à l'écran est un média non paginé, ou continu, c'est-à-dire que le document n'a pas de hauteur à proprement parler. On utilise d'ailleurs des barres de défilement pour le consulter s'il dépasse la surface affichable dans la fenêtre du navigateur web.

La largeur d'affichage du document dépend quant à elle de la largeur de la fenêtre du navigateur. On peut utiliser des marges afin d'éviter que les contenus ne soient collés aux bords de la fenêtre, c'est le modèle de boîte CSS. A partir du moment où l'on fixe une largeur à un élément, il est envisageable de le centrer horizontalement par rapport aux bords du document/à la fenêtre du navigateur ou encore à d'autres éléments parents. Le calcul est fait par le navigateur et pis c'est bon.

Le centrage vertical en CSS est quant à lui au pire irréalisable/pas intéropérable ; au mieux complexe à mettre en place. Et ça ne passe effectivement pas par des marges automatiques
Les raisons qui font que ce n'est pas possible comme ça sont donc bien historiques, mais elles sont surtout liées aux propriétés du média, et donc logiques.
Modifié par audrasjb (21 May 2012 - 22:21)

Bonsoir audrasjb,

merci pour tes explications. Je me doutais que l'origine était bien historique.

Mais dire que le problème vient d'une mauvaise compréhension du média web est un peu trop facile.

Je veux bien que la largeur de la page soit aligné sur la largeur de l'écran !
Mais pourquoi considérer que la hauteur de la page soit indéfinie (ou en continue) ?
Physiquement, la page possède une dimension en largeur comme en hauteur.
L'usage des ascenseurs n'a rien avoir avec ces choix !
On peut très bien bien déborder, hors des dimensions de l'écran, en largeur comme en hauteur. Et pourquoi cela ne fonctionnerait-il qu'en largeur ?

C'est là le fond de mon interrogation.

Une solution en Javascript est possible, mais cela devient vite une usine à gaz.
Et puis, cela n'est plus le standard HTML & CSS que l'on recherche.
(je précise que je ne recherche pas une solution pour faire un alignement vertical).

Ma seule réflexion sur le "margin auto" est que je considère qu'il y a un manque qui pourrait bien solutionner des problèmes concernant l'alignement vertical d'une image ou d'un bloc.

@+