如何在vertical-align
属性中使用float
和div
?如果我不使用vertical-align
,float
可以正常工作。但是,如果我使用浮动,那么它不起作用。对我来说,使用float:right
作为最后一个div非常重要。
我正在尝试关注,如果你从所有div中移除浮动,那么它将正常工作:
<div class="wrap">
<div class="left">First div, float left, has more text.</div>
<div class="left2">Second div, float left </div>
<div class="right">Third div, float right</div>
</div>
CSS:
.wrap{
width: 500px;
overflow:hidden;
background: pink;
}
.left {
width: 150px;
margin-right: 10px;
background: yellow;
float:left;
vertical-align: middle;
display:inline-block
}
.left2 {
width: 150px;
margin-right: 10px;
background: aqua;
float:left;
vertical-align: middle;
display:inline-block
}
.right{
width: 150px;
background: orange;
float:right;
vertical-align: middle;
display:inline-block
}
答案 0 :(得分:81)
您需要设置行高。
<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>
答案 1 :(得分:15)
答案 2 :(得分:8)
实际上,垂直对齐并不适用于浮动元素。这是因为浮动将元素从文档的正常流中提升。 你可能想要使用其他垂直对齐技术,比如基于变换,显示:table,绝对定位,line-height,js(也许是最后的手段)甚至普通的旧html表(如果内容是实际上是表格的。你会发现在这个问题上存在激烈的争论。
但是,这是你可以垂直对齐你的3个div:
.wrap{
width: 500px;
overflow:hidden;
background: pink;
}
.left {
width: 150px;
margin-right: 10px;
background: yellow;
display:inline-block;
vertical-align: middle;
}
.left2 {
width: 150px;
margin-right: 10px;
background: aqua;
display:inline-block;
vertical-align: middle;
}
.right{
width: 150px;
background: orange;
display:inline-block;
vertical-align: middle;
}
不确定为什么你需要固定宽度,显示:内联块和浮动。