bonsoir,
ne pas utilisé la propriété 'float' , qui éjecte à gauche ou à droite l'élément ainsi positionné , il ne sont pas 'centrable' naturellement tant horizontalement dans leur conteneur parent que verticalement par rapport à leurs éléments adjacent.
Le centrage horizontale peut s'appliquer a un élément de type block , dimensionné en largeur et en marge auto (en mode standard pour IE , en passant) . Pour un tableau on peut omettre les dimensions de largeurs. 1 seul élément block se positionnera sur cet axe horizontal .
Le 'text-align:center; s'applique aux textes , images et éléments de type inline , Le display:inline-block; devrait en principe permettre de de donné cette possibilité de mise en forme a touts elements en gardant la possibilité de dimensionné ceux-ci.
Firefox ne comprends pas cette règle et Internet explorer (version 7 à ce jour dispo) implémente cette propriété différemment.
En bref ce que tu veux n'est pas vraiment possible à l'heure actuelle dans l'ensemble des navigateurs (ça évolue vite quand-même
).
Si tu aime 'le risque' , voici une bidouille qui brut comme ça peut sembler satisfaisante:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test centrage</title>
<style type='text/css'>
.flottante {
background-color : #00ff00;
border-color : #ffff00;
border-style : dotted;
border-width : 2px;
margin : 2px;
display:table-cell;/* gecko */
display:inline-block; /* selon w3c */
width : 100px;
vertical-align:middle;
}
.conteneur {
border-spacing:2px;
text-align:center;
display:table;/* pour tous exepté IE */
margin:auto;
}
.spacer {
clear: both;
}
</style>
<!--[if IE]>
<style type="text/css">
.flottante {
display:inline;
zoom:1;
}
</style>
<![endif]-->
</head>
<body>
<div class="conteneur">
<div class="flottante">boîte verte 1</div>
<div class="flottante">boîte verte 2</div>
<div class="flottante">boîte verte 3<br/>yrtyty</div>
<div class="spacer"> </div>
</div>
</body>
</html>
mise en forme a l'aide de display:table; et margin auto; pour tous les navigateurs exepté IE. , puis un display:table-cell ; pour Les gecko surchargé d'un display:inline-block .
Pour IE un display:inline-block; revisité en mode standard pour les éléments de type block (haslayout forcé).
Un br dans la 3eme boite pour te donner un aperçu des différences , pour percevoir un peu plus les différences , applique des bordures au conteneurs et des couleurs de fond. , multiplie le nombre de boite j...
Si les besoin de mise en forme reste sobre , les boites trés peu nombreuses, cela peut peut-etre te convenir ... Les gecko (Firefox entre autres) auront un comportement différents.
GC
Modifié par gcyrillus (15 Mar 2008 - 22:07)
