Un text-align:center non pris en compte ?

Bonsoir,

Je sèche sur un code... J'ai trois sections en colonnes, et dans la section du milieu j'ai 4 sections de 2 colonnes sur 2 lignes. Mon problème se situe au niveau de la section du milieu, à savoir que je voudrais que son contenu (les 4 sections) soit centré au coeur de la section du milieu. Or je n'y arrive pas, en dépit du text-align:center qui se situe dans le div parent comme s'il n'était pas pris en compte.

<div style="width:15%; height:400px;  text-align:left; position: relative;float:left; background-color:#D8B0FF">&nbsp;</div>

<div style="width:70%; height:400px; text-align:center; position: relative; float:left; ">

<div style="width:45%; height:150px; padding: 5px; margin: 5px 5px 5px 5px; text-align:left; position: relative; float:left; background-color:#FFFFFF; border:#9933CC solid 1px">1&nbsp;</div>
<div style="width:45%; height:150px; padding: 5px; margin: 5px 5px 5px 5px; text-align:left; position: relative; float:left; background-color:#FFFFFF; border:#9933CC solid 1px">2&nbsp;</div>
<div style="clear:left;"></div>
<div style="width:45%; height:150px; padding: 5px; margin: 5px 5px 5px 5px; text-align:left; position: relative; float:left; background-color:#FFFFFF; border:#9933CC solid 1px">3&nbsp;</div>
<div style="width:45%; height:150px; padding: 5px; margin: 5px 5px 5px 5px; text-align:left; position: relative; float:left; background-color:#FFFFFF; border:#9933CC solid 1px">4&nbsp;</div>

</div>

<div style="width:15%; height:400px;  text-align:left; position: relative; float:left; background-color:#E9D2FF">&nbsp;</div>

Any idea please ?

Salut,

La propriété text-align sert à aligner du texte, comme son nom l'indique. Plus généralement, elle sert à aligner un élément inline dans un élément block, et non des éléments block dans un autre élément block.
Pour center un élément block, il suffit d'appliquer des marges droite et gauche automatique.

Bonjour,

Oui, bien vu, sauf que cela ne marche pas... Aucun changement apparent

Je me suis dit que c'était peut-être le pourcentage du width, mais non, que je laisse 70% ou que je mette 500px par exemple, ça ne donne rien de mieux au niveau du centrage.
Et que je mette margin: 0 auto; ou margin-left: auto; margin-right: auto;, ça ne change pas. Bref, je ne vois pas ce qui bloque.

J'ai testé en enlevant, juste pour voir le résultat, le float:left;, évidemment je ne peux pas le virer pour de bon, mais j'ai l'impression que ça centre mieux (en dépit du bordel que ça génère). Pour autant, ça ne m'aide pas encore de le savoir...

Petite précision : Ce n'est pas au parent qu'il faut attribuer les marges automatiques, mais bien aux éléments eux-mêmes que tu veux centrer.

J'ai testé avec un nouveau conteneur intermédiaire :

<div style="width:90%; margin-left: auto; margin-right: auto;  ">

Ca centre, on s'en rend compte avec le 90% plutôt que le 100%. Par contre, il y a tout de même un décalage, c'est centré mais avec un décalage vers la gauche. Est-ce que ça pourrait être l'impact des padding ou des margin ?

C'est surtout que tu mélanges les px et les %. En gros, tu as deux blocs de 45% de largeur, soit 90% au total. Tu ajoutes les padding et margin de 5px aux 90%, ça ne te fera jamais 100% (sauf exceptions). D'où ce décalage.

Le problème doit être ailleurs : lorsque je vire les padding et les margin, le décalage vers la gauche est encore pire. Et là il n'y a plus de mélange %/px.

Heu, c'est normal. 45+45=90% de la largeur du parent !

Quand ton parent a une largeur de 90%, pour que ses enfants prennent toute la largeur il ne faut pas que leur somme soit égale à 90% mais à 100%, soit 50% chacun dans ton cas.

Oui, je suis d'accord sur le principe en théorie, sauf que si je mets 50% au lieu de 45%, je n'ai pas le loisir de voir si ça marche parce qu'au final les 2 blocs de 50%, initialement côte côte, se retrouvent l'un en dessous de l'autre, idem pour les 4 blocs d'ailleurs, sans doute parce que le 50%+50%, soit 100%, doit être trop large, peut-être à un pixel près, je ne sais pas.

J'avais déjà testé, donc je reteste en virant même les padding et les margin histoire d'y voir plus clair, cela ne change rien.

Je rectifie : cela ne foire pas à 1 pixel près mais à 4 pixels près car cela fonctionne a priori si je joue avec le border:#9933CC solid 1px devant : border:#9933CC solid 0 !

Par contre, la question est de savoir comment faire pour préserver mon border de 1 pixel sur chaque bloc ? Ou comment obtenir un border interne et non externe pour éviter les conséquences...

Ceci dit, cela ne résout pas tout : cela fonctionnerait qu'à partir du moment où je n'aurais besoin ni de padding ni de margin, le souci est que j'en ai bel et bien besoin sinon tout est collé.

Bref, voilà donc les 3 générateurs de décalages : border, padding et margin.

Bonjour

Pour le text-align:center ; attention , certain version de IE applique ça comme si une balise <center> etait inserer , c'est utile en mode quirk ou le margin:auto; n'est pas applicable et il faut dans ce cas le reinitialiser dans les enfants , ailleurs ça ne marche pas comme ça.

Pour ton problème de marge , en etant econome , tu peut ne les appliquer qu'aux endroits utiles et ainsi éliminer quelques fusions parfois differentes d'un nav a l'autre (certaines version d'opera ne fusionnent pas toujours bien les marges externes latérales ) et compenser les pixels de certaines version de IE.

Ton code exemple me semble un peu surcharger . Le clear ne semble pas utile non plus , quand au float , le flottement a droite est aussi utilisable.

Enfin , le pourcentage pour ce genre de montage est effectivement hasardeux si regler trop juste et melanger a des pixels .

voici un gabarit minimale :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test en XHTML 1.0 Strict</title>
<style type='text/css'>
html {background:#ddd;}
body {background:#D8B0FF;text-align:center;}
.container {background:#fff;padding:10px 10px 0 ;width:70%; overflow:hidden;margin:auto;}
.block {width:48%; height:150px; text-align:left; position: relative;  background-color:#FFFFFF; border:#9933CC solid 1px;margin-bottom:10px;padding:0.5%;text-align: center;}
.left {  float:left;margin-right:-3px;}
.right { float:right; margin-left:-3px;}
</style>
</head>
<body>
<div class="container" >
	<div class="block left ">1&nbsp;</div>
	<div class="block right">2&nbsp;</div>
	<div class="block left ">3&nbsp;</div>
	<div class="block right">4&nbsp;</div>
</div>
</body>
</html>

Sinon , ça ressemble a un joli tableau ...

GC