Центр Div внутри другого (ширина 100%) div - PullRequest
Новая
       10

Центр Div внутри другого (ширина 100%) div

38 голосов
/ 15 сентября 2009

Здесь довольно «простая» проблема, и я не уверен, почему она так сложна.

  1. Имеет размер 100% (ширина).
  2. Поместите еще один div в середину этого div (размер 940px ширина)

Есть идеи? :)

Ответы [ 6 ]

55 голосов
/ 15 сентября 2009 
.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }
30 голосов
/ 15 сентября 2009

Нижеприведенный стиль для внутреннего div будет центрировать его. 

margin: 0 auto;
20 голосов
/ 15 сентября 2009

для подробной информации, скажем, код ниже сделает центр по центру: 

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

или просто используйте: 

margin: 0 auto;

, но имейте в виду, что приведенный выше код CSS работает, только когда вы указываете фиксированную ширину (не 100%) в своем HTML-элементе. поэтому полное решение для вашей проблемы будет: 

.your-inner-div {
      margin: 0 auto;
      width: 900px;
}
6 голосов
/ 15 сентября 2009

Ключом является поле : 0 авто; на внутреннем div. Пример проверки концепции: 

<!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>
4 голосов
/ 14 октября 2011 
.outerdiv {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

Не работает в Internet Explorer 7 ... но кого это волнует?

3 голосов
/ 15 сентября 2009

Просто добавьте margin: 0 auto; к внутреннему разделу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...