89

我如何在属性中使用vertical-align以及？如果我不使用. 但是如果我使用浮动，那么它就不起作用。对我来说使用最后一个 div 很重要。floatdivvertical-alignfloatfloat:right

我正在尝试关注，如果您从所有 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
}

JSFiddle

4

3 回答 3

87

您需要设置行高。

<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>

http://jsfiddle.net/VBR5J/

于 2013-06-14T07:26:50.927 回答
13

编辑：

垂直对齐CSS 属性指定内联、内联块或表格单元元素的垂直对齐方式。

阅读这篇文章了解垂直对齐

于 2012-07-30T08:54:47.850 回答
9

垂直对齐确实不适用于浮动元素。那是因为 float 从文档的正常流程中提升了元素。您可能想要使用其他垂直对齐技术，例如基于变换、显示：表、绝对定位、行高、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; 
}

不知道为什么你需要固定宽度，显示：内联块和浮动。

于 2015-04-07T09:53:35.787 回答