Question

我试图将一个div（包含一个搜索栏）垂直居中放在另一个div（顶部横幅）中。我的印象是，为了做到这一点，你做了以下事情：

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

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

此操作正常，直到您添加margin-top，此时它也会应用于#banner。

有没有其他方法可以做到这一点，或者我只是做错了？

Here's a jsFiddle of my actual code.

Answer 1

我使用line-height，其值与父div的高度相同。

如下所示：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;
}

编辑：根据NGLN的建议，这也将修复水平居中，#srcdiv和#src具有相等的宽度。

Answer 2

您必须将overflow: hidden添加到#banner。为了清除浮动，我想。

然后，将负边距修改为#srcdiv中的margin-top: -11px（您必须对div高度，边框和总高度的填充值求和）

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

Answer 3

提供margin:0px和padding:0px并删除margin-top

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

}

嵌套div垂直对齐问题

3 个答案: