CSS垂直对齐浮动div
CSS垂直对齐浮动div
提问于 2012-02-24 20:39:19
我有一个包含两个并排的div的div (#wrapper)。
我希望右div垂直对齐。我尝试了在我的主包装器上垂直对齐: wrapper，但它不起作用。它快把我逼疯了！
希望有人能帮上忙。
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;}回答 4
Stack Overflow用户
回答已采纳
发布于 2012-02-24 20:52:12
你在使用浮动元素时就不走运。他们不服从垂直排列，
您需要的是display:inline-block：
当心
小心使用display: inline-block;，因为它将元素之间的空白解释为真正的空白。它不会像display: block那样忽略它。
我推荐这样做：
将包含元素的font-size设置为0 (零)，并将元素中的font-size重置为所需的值，如下所示
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;
}Stack Overflow用户
发布于 2018-03-24 01:29:31
一种可能的解决方案是使wrapper div flex与https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/指定的center上的项对齐。
Stack Overflow用户
发布于 2018-12-10 17:28:51
我尽量避免使用浮点数...但是-当需要时，我使用以下几行垂直对齐到中间：
position: relative;
top: 50%;
transform: translateY(-50%);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9430929
复制相关文章
相似问题
腾讯云开发者
