web-dev-qa-db-fra.com

Comment faire pour aligner le conteneur principal div au centre?

Je me suis toujours demandé comment les autres personnes pouvaient aligner au centre le conteneur div principal car la seule façon que je gère jusqu'à présent est d'ajouter au fichier css ce qui suit:

*{
padding:auto;
margin:auto;
text-align:centre;
}

J'ai vu d'autres pages utilisant: *{padding:0px;margin:0px} mais je ne vois pas où ni comment font-ils pour centraliser le conteneur principal.

Quelqu'un pourrait-il expliquer comment?

Exemple de code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>

Quelqu'un pourrait-il expliquer comment le faire dans la page suivante?

http://www.csszengarden.com/?cssfile=/179/179.css&page=4

csshtmlalignment
19
Amra

N'utilisez pas le * selector car cela s'appliquera à tous les éléments de la page. Supposons que vous ayez une structure comme celle-ci:

...
<body>
    <div id="content">
        <b>This is the main container.</b>
    </div>
</body>
</html>

Vous pouvez ensuite centrer le #content div en utilisant:

#content {
    width: 400px;
    margin: 0 auto;
    background-color: #66ffff;
}

Je ne sais pas ce que vous avez vu ailleurs mais c'est la voie à suivre. Le * { margin: 0; padding: 0; } l'extrait que vous avez vu sert à réinitialiser les définitions par défaut du navigateur pour tous les navigateurs afin que votre site se comporte de la même manière sur tous les navigateurs, cela n'a rien à voir avec le centrage du conteneur principal.

La plupart des navigateurs appliquent une marge et un remplissage par défaut à certains éléments, ce qui n'est généralement pas cohérent avec les implémentations d'autres navigateurs. C'est pourquoi il est souvent considéré comme intelligent d'utiliser ce type de "réinitialisation". L'extrait de réinitialisation que vous avez présenté est la plus simple des feuilles de style de réinitialisation, vous pouvez en savoir plus sur le sujet ici:

39
Tatu Ulmanen

Le principe de base du centrage d'une page est d'avoir un corps CSS et un CSS main_container. Ça devrait ressembler a quelque chose comme ca:

body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#main_container {
     margin: 0 auto;
     text-align: left;
}
3
Kids Formal

Vous pouvez aligner le texte: centrez le corps pour centrer le conteneur. Puis text-align: a quitté le conteneur pour obtenir tout le texte, etc. pour aligner à gauche.

3
Megan

J'omettrais le * { text-align:center } déclaration, car elle définit l'alignement central pour tous les éléments.

Habituellement avec un conteneur à largeur fixemargin: 0 auto devrait suffire

1
Juraj Blahunka