Question

我已经搜索了一天以上的方法来垂直对齐我的流体设计的标题，所以在不知道字体大小和特定像素的情况下我的3个div将是相同的高度和里面的内容他们在同一条线上。

以下是我现在所拥有的fiddle示例，以便您了解我的需求。

这是代码：

HTML：

<div id="container">
<div id="header">
    <div id="menu">     
        <a href="#">
            <img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
        </a>
    </div>
    <div id="title">
        My site title
    </div>
    <div id="my_button">
        <button id="button">My button</button>
    </div>
    <div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>

CSS：

html,body {
height: 100%;
font-size: 2vmin;
}

#container {
height: 100%;
min-height: 100%;
}

#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}

#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}

#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}

div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}

#content {
height: 70%;
width: 100%;
background: #eeeeee;
}

Answer 1

你可以使用：after pseudo element来解决你的问题。

在CSS

中的#header样式之后添加它

#header:after{
height: 100%;
width: 1px;
font-size: 0px;
display: inline-block;
}

然后从＃menu，＃title和#my_buttun div中移除浮动并应用

display: inline-block; 
vertical-align: middle;

内联块会在这些div之间产生小的间隙，但是如果你不对它们应用背景颜色，那就没关系。

最后：make #my_button width：19％;

请看这里：http://jsfiddle.net/D22Ln/5/

Answer 2

如果你的意思是三个水平div，那么为它们设置height: 100%;就可以了。从那里你只需修改其父元素的大小（目前为20％），它们将自动适应。

http://jsfiddle.net/D22Ln/2/

Answer 3

如果我理解正确，这可能就是你要找的东西，我只是复制了我之前做过的事。但要测试一下：http://jsfiddle.net/6aE72/1/

通过使用包装器和帮助器，左侧和右侧div的大小与中间相同，辅助器有助于垂直对齐

#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;}
.content { display: table-cell; }

Answer 4

这FIDDLE可能会对您有所帮助。我使用了bootstrap框架。重新调整结果网格的大小。

垂直对齐父元素内的多个元素

4 个答案: