如何在 div
属性中使用 vertical-align
和 float
?如果我不使用 float
,vertical-align
可以正常工作。但是,如果我使用 float ,则它不起作用。对我来说,对最后一个 div 使用 float:right
很重要。
我正在尝试以下操作,如果您从所有 div 中删除 float ,那么它将正常工作:
<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
}
最佳答案
需要设置行高。
<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>
关于html - 为什么在 CSS 中使用 float 时垂直对齐不能正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11718134/