小编典典

CSS垂直对齐不适用于float

css

我如何使用vertical-align,以及floatdiv性能?的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
}

JSFiddle


阅读 748

收藏
2020-05-16

共1个答案

小编典典

您需要设置行高。

<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>
2020-05-16