Проблема вертикального выравнивания вложенного div

Question

Я пытаюсь расположить один div по вертикали (содержащий панель поиска) внутри другого (верхний баннер). У меня сложилось впечатление, что для этого вы сделали следующее:

#banner {
height: 35px;
width: 100%;
}

#searchbar {
    height: 15px;
    position: relative;
    top: 50%;
    margin-top: -7.5px; /* half of the height */
}

Это прекрасно работает, пока вы не добавите margin-top, после чего оно будет применено и к #banner.

Есть ли альтернативный способ сделать это, или я просто делаю это неправильно?

Вот jsFiddle моего фактического кода.

Answer 1

Я использую line-height со значением, равным высоте родительского деления.

Как видно здесь: http://jsfiddle.net/vkJ78/24/

CSS:

#banner    {
    background-color: #770E17;
    height: 35px;
    width: 100%;
    border-bottom: 1px solid #333;
    }

#src    {
    width: 300px;
    height: 15px;
    border: 1px solid #333;
    padding: 3px;
    }

#srcdiv {
    width: 308px;
    margin: 0px auto;
    position: relative;
    line-height: 35px;
}

EDIT: В соответствии с рекомендациями NGLN это также исправит горизонтальное центрирование, #srcdiv и #src, имеющие равную ширину.

Answer 2

Вы должны добавить overflow: hidden в #banner.Я думаю, чтобы очистить число с плавающей точкой.

Затем измените отрицательное поле на margin-top: -11px в #srcdiv (вы должны суммировать высоту div, границу и отступ для общей высоты)

http://jsfiddle.net/vkJ78/1/

Answer 3

Дайте margin:0px и padding:0px и удалите верхний край

body {
    margin:0px;
    padding:0px;

}