你好我有一个div(#wrapper)包含2个divs并排。我想右右对齐。我尝试vertical-align：中间在我的主要包装，但它不工作。它驱使我疯了！希望有人可以帮助。预先感谢您的回复。干杯。马克。
我的HTML：
<div id="wrapper">
<div id="left-div">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div id="right-div">
Here some text...
</div>
</div>
我的CSS：
#wrapper{
width:400px;
float:left;
height:auto;
border:1px solid purple;}
#left-div{
width:40px;
border:1px solid blue;
float:left;}
#right-div{
width:350px;
border:1px solid red;
float:left;}
ul{
list-style-type: none;
padding:0;
margin:0;}
解决方法
你没有浮动元素的运气。他们不服从垂直对齐，
你需要，显示：inline-block代替：
谨防
注意显示：inline-block;因为它将元素之间的白色空间解释为真实的白色空间。它不会像显示：block那样忽略它。
我推荐这：
将包含元素的字体大小设置为0(零)，并将字体大小重置为元素中所需的值，如此
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul > li {
font-size: 12px;
}
请参见这里的演示：http://codepen.io/HerrSerker/pen/mslay
CSS
#wrapper{
width:400px;
height:auto;
border:1px solid green;
vertical-align: middle;
font-size: 0;
}
#left-div{
width:40px;
border:1px solid blue;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
#right-div{
width:336px;
border:1px solid red;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
