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

Question

我已经搜索了超过一天的方法来垂直对齐我的 fluid 设计的标题，所以在不知道字体大小和特定像素的情况下，我的 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 伪元素来解决您的问题。

在您的 CSS 中的#header 样式之后添加它

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

然后从#menu、#title 和#my_buttun div 中删除 float 并应用

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

内联 block 会在这些 div 之间创建小间隙，但如果您不为它们应用背景色，则没问题。

最后:使#my_button 宽度:19%；

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