J'ai deux parties sur mon site. Le corps principal et la barre latérale. Le corps est 6in et la barre latérale sera probablement 200px. Comment centrer ma page? Donc, il y a un espace égal sur les côtés gauche et droit? Il devrait centrer, peu importe la résolution.Comment dois-je centrer ma page?
Utilisation de XHTML 1.0 Strict. Devrait fonctionner sur tous les principaux navigateurs ou au moins Firefox et Chrome.
Vous pouvez définir la marge d'auto pour les marges gauche et droite:
<div id="wrapper">
<div id="sidebar"></div>
<div id="main"></div>
</div>
#sidebar {
float:left;
width: 50px;
}
#main {
width: 150px;
float:left;
background-color: yellow;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 200px;
}
C'est assez portable aussi, fonctionne même sur les anciennes versions IE.
Mise à jour L'enveloppe, la barre latérale et la ligne principale doivent avoir des largeurs. Google deux colonnes de mise en page, c'est une façon assez classique de le faire.
http://jsfiddle.net/aXLVv/1/ - le voir en action.
Qu'en est mise
margin: 0px auto;
au réservoir externe.
<div id="wrapper">
<div id="side"></div>
<div id="main"></div>
</div>
#wrapper { margin: 0 auto; width: 800px; }
'px' ou toute autre unité n'est pas nécessaire en combinaison avec' 0'. –
est-ce que cela signifie que j'ai une classe div la plus externe-conteneur avec mon div principal et sidebar à l'intérieur? –
@acid: oui, comme '
body {
margin-left: auto;
margin-right: auto;
}
Je ne pense pas que margin-left: auto; et marge-droite: auto; marchera. Vous devez avoir un wrapper global.
Il ne semble pas fonctionner (en utilisant Firefox). J'ai alors essayé ici http://jsfiddle.net/AQ5Sf/ –
le 'wrapper' doit avoir une largeur fixe. –