@H_403_1@你好我有一个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; }