Discussion sur le centrage d'éléments en CSS

Hello à tous

Cela fait qques mois que je programme en XHTML+CSS, et régulièrement, je suis confronté au même "problème".
Je mets des guillemets car ça n'en est pas vraiment un puisqu'il existe tjrs une solution propre en CSS pour la contourner.
Ce "problème" concerne le centrage d'éléments sur une page web.
Alors que la balise <center> est déjà dépréciée dans les spécifications à venir HTML, en CSS, pour centrer en élément, il faut jongler avec :
- text-lign: center;
- margin-left: auto; et son homologue de droite
- left: 50%;

Bref... tout ça me paraît un peu complexe par rapport à la simplicité de la balise <center>
Tant est si bien que parfois, la tentation est grande de ne pas se prendre la tête...

J'ai donc 2-3 questions pour ouvrir le débat, si vous le voulez bien.
Pour qu'elle(s) raison(s) n'existe-t-il pas (encore?) d'attribut du style horizontal-align et vertical-align qui positionnerait l'élément centré entre deux autres éléments positionnés ? Le genre de truc qui marche à tout les coups, comme si on utilisait la balise <center> ! Est-ce irréalisable ? Ou est-ce non souhaitable et dans ce cas pourquoi ?

Merci pour vos contributions

Salut,

vertical-align existe déjà, mais n'est applicable qu'aux cellules de tableau je crois.

horizontal-align existe aussi, mais c'est text-align, qui centre tous les éléments en ligne.

Et margin: X auto; qui centre les éléments de type block sauf sous IE qui ne comprend rien à rien.

D'où le "bordel" résultant en jonglant avec text-align et margin pour IE.

Sans IE, margin et text-align permettraient de centrer n'importe quoi, block ou inline.

EcliptuX a écrit :

J'ai donc 2-3 questions pour ouvrir le débat, si vous le voulez bien.
Pour quelle(s) raison(s) n'existe-t-il pas (encore?) d'attribut du style horizontal-align et vertical-align qui positionnerait l'élément centré entre deux autres éléments positionnés ? Le genre de truc qui marche à tout les coups, comme si on utilisait la balise <center> ! Est-ce irréalisable ? Ou est-ce non souhaitable et dans ce cas pourquoi ?

Slt,

le problème vient du fait que centrer ne veut en soit rien dire. Centrer, quoi, par rapport à quoi, à partir de quoi (ça dépend du display) ?

Alors centrer un élément en display:block; (car c'est de ça que tu parles j'ai l'impression) demande quelques lignes de plus qu'un simple <center/>, mais de toute façon, tu proposerais

block{
width:200px;
horizontal-align:center;
}

au lieu de :

block{
width:200px;
margin:auto;
}

donc je vois pas la différence.
En fait, je trouve ça assez simple de centrer quelquechose avec CSS pour tout te dire...
Après, il y a des trucs à connaître, et quand on ne les connait pas ça entraine certaines frustrations (je pense au centrage vertical de texte dans un block) mais bon, CSS n'est pas simple à apprendre.

a+

EcliptuX a écrit :
Hello à tous

Alors que la balise <center> est déjà dépréciée dans les spécifications à venir HTML

Il n'y a pas, côté W3C, de spécification HTML à venir : HTML s'arrête avec HTML4.01, dans lequel HTML4.01 transitionnal permet d'utiliser <center>.

Dans le format de transition XHTML1.0, la variante transitional permet également d'utiliser <center>

Dans les formats "futuristes" basés sur XHTML modulaire, un module intégrable à volonté dans des DTD sur mesure permet encore de conserver <center> si on en a un besoin incontournable.


la "disparition" de <center" n'est donc absolument pas un problème, puisqu'il ne disparaît pas.

EcliptuX a écrit :

, en CSS, pour centrer en élément, il faut jongler avec :
...
- left: 50%;

Eviter cette solution (centrage par les marges négatives) qui est très problématique dès que la largeur de la zone d'affichage est inférieure à celle du conteneur centré à taille fixe en pixel: le côté gauche est inaccessible.

EcliptuX a écrit :
J'ai donc 2-3 questions pour ouvrir le débat, si vous le voulez bien.
Pour qu'elle(s) raison(s) n'existe-t-il pas (encore?) d'attribut du style horizontal-align et vertical-align qui positionnerait l'élément centré entre deux autres éléments positionnés ? Le genre de truc qui marche à tout les coups, comme si on utilisait la balise <center> ! Est-ce irréalisable ? Ou est-ce non souhaitable et dans ce cas pourquoi ?

Problème de fond : cet attribut réintroduirait le même degré de présentation dans la structure (X)HTML que l'élément <center>. Les raisons de séparer données de présentation et de structure sont nombreuses, et nous n'allons pas les énumérer ici. Mais cette séparation est, c'est l'essentiel, la moins mauvaise des solutions pour davantage d'interopérabilité, de réutilisabilité des contenus et d'accessibilité.

Autre problème de fond, plus propre à CSS: le centrage d'une boîte repose en fait sur des mécanismes radicalement différents selon qu'il s'agit d'une boîte en ligne, d'une boîte bloc, d'une boîte dans le modèle de boîte des tableaux, etc. D'où plusieurs techniques différentes selon les cas de figures, adaptées aux contraintes de chaque modèle.

ce qui complique les choses, en réalité, ce sont les défauts d'implémentation de CSS2 selon les différents navigateurs.
Modifié par Laurent Denis (09 Aug 2005 - 12:02)