web-dev-qa-db-fra.com

Centre Div à l'intérieur d'un autre (100% largeur) div

Un problème "simple" ici et je ne sais pas pourquoi il est si compliqué.

  1. Avoir un div de taille 100% (largeur).
  2. Avoir un autre div positionné au milieu de ce div (largeur 940px)

Des idées? :)

cssxhtml
38
Shadi Almosri
.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }
55
geowa4

Le style ci-dessous au div intérieur le centrera.

margin: 0 auto;
30
Virat Kadaru

pour des informations détaillées, disons que le code ci-dessous fera un centre aligné div:

margin-left: auto;
margin-right: auto;

ou utilisez simplement:

margin: 0 auto;

mais gardez à l'esprit que le code CSS ci-dessus ne fonctionne que lorsque vous spécifiez une largeur fixe (et non 100%) sur votre élément html. donc la solution complète pour votre problème serait:

.your-inner-div {
      margin: 0 auto;
      width: 900px;
}
20
Khashayar

La clé est le margin: 0 auto; sur la div intérieure. Un exemple de preuve de concept:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
    <div style="background-color: blue; width: 100%;">
        <div style="background-color: yellow; width: 940px; margin: 0 auto;">
            Test
        </div>
    </div>
</body>
</html>
6
Larsenal
.outerdiv {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

Ne fonctionne pas dans Internet Explorer 7 ... mais peu importe?

4
DeFliGra

Ajoutez simplement margin: 0 auto; à la div intérieure.

3
ScottE