Центр div внутри другого div

Я пытаюсь установить div, центрированный внутри другого div.Центр div внутри другого div

Это HTML-страница:

<body> 
<div id="divParent"> 
    <div id="divHeader" > 
     <div id="divHeaderText"> 
     </div> 
    </div> 
    <div id="divBody"> 
    </div> 
</div> 
</body>

И это стиль:

#divHeader { 
    background-color: #C7C7C7; 
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
    height: 80px; 
    margin-bottom: 2px; 
} 
#divBody { 
    background-image: url('images/GradientBackground.png'); 
    background-repeat: repeat-x; 
    height: 300px; 
} 
#divHeaderText { 
    margin: auto; 
    width: 90%; 
    height: 80%; 
    background-color: #00FF00; 
}

Почему маленький ДИВ не оставил места на его вершине?

источник

2010-01-14 VansFannel

Что именно вы спрашиваете? – SLaks

Я спрашиваю о центре по вертикали. – VansFannel

Ваш вопрос непонятен.

Если вы пытаетесь вертикально центрировать #divHeaderText в пределах #divHeader, попробуйте добавить margin-top: 13px;.

источник

2010-01-14 18:15:42 SLaks

Для центрирования по горизонтали вы можете использовать text-align: center на встроенных элементах или марке: 0 auto с установленной шириной на контейнерах и элементами уровня блока.

Для вертикального центрирования текста вы можете установить свойство line height, равное высоте содержащего div.

Чтобы центрировать div по горизонтали, вы можете применить свойство margin-top для помещения его в центр.

Обратите внимание, что вопросы дизайна более подходят для http://www.doctype.com/, поскольку SO в значительной степени ориентирован на серверные языки и прикладное программирование.

источник

2010-01-14 18:17:42 DeaconDesperado

margin: авто не работает для вертикального выравнивания. Вы должны указать точное число в px, em и т. Д. В вашем примере это не должно быть проблемой, поскольку вы знаете высоту родительского контейнера.

источник

2010-01-14 18:21:49

#divHeaderText { 
margin: auto; 
width: 90%; 
height: 64px; /* 80% of 80px */ 
margin-top: 8px; /* (80 - 64)/2 = 8 */ 
background-color: #00FF00; 
}

источник

2010-01-14 22:01:20

Вы пробовали? Я использую Internet Explorer 8 и Firefox 3.5.7, и это решение не работает. Я использую firebug, и я вижу, что divHeaderText находится вне divHeader. – VansFannel

Центр div внутри другого div

ответ

Смежные вопросы