Центр div внутри другого div - PullRequest
Новая
       3

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

1 голос
/ 14 января 2010

Я пытаюсь установить 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;
}

Почему самый маленький div не оставляет пробела на его вершине?

Ответы [ 4 ]

3 голосов
/ 14 января 2010

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

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

2 голосов
/ 14 января 2010

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

0 голосов
/ 15 января 2010 
#divHeaderText {
margin: auto;
width: 90%;
height: 64px; /* 80% of 80px */
margin-top: 8px; /* (80 - 64) / 2 = 8 */
background-color: #00FF00;
}
0 голосов
/ 14 января 2010

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

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

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

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

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

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

...