CSS垂直对齐不适用于浮动

Posted 2023-03-05

【中文标题】CSS垂直对齐不适用于浮动

【英文标题】：CSS Vertical align does not work with float

【发布时间】：2012-07-27 22:08:11

【问题描述】：

如何在div 属性中使用vertical-align 和float？如果我不使用float，vertical-align 可以正常工作。但是如果我使用浮动，那么它就不起作用。最后一个 div 使用 float: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

【参考方案1】：

已编辑：

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

阅读这篇文章以获取Understanding vertical-align

【讨论】：

它也适用于inline-block 元素。

已更新。我错过了。感谢提及。

这不是答案

【参考方案2】：

你需要设置行高。

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

【讨论】：

如果您将line-height 设置为所有元素的相同值，则vertical-align 是无用的。 (jsfiddle.net/VBR5J/448)

不适用于<button> 元素。而不是<span> 是<button>。

这个答案是错误的。 vertical-align 属于 CONTAINER（div）而不是单个元素。正确的解决方案——能够垂直对齐浮动元素——是将vertical-align 和line-height 放在容器上：<div style="border: 1px solid red; vertical-align:middle; line-height: 38px;">。从跨度样式中删除vertical-align:middle; line-height: 38px;。

刚刚发现我的建议适用于答案小提琴中的浮动跨度，但不适用于某些元素（对于浮动无线电输入失败）。

@ToolmakerSteve 是错误的，这个答案是错误的。垂直对齐仅适用于内联元素、内联块或表格单元格（后者很奇怪）。添加 'float' 使 en 元素成为块元素。不过，使用 line-height（并忽略 vertical-align）可能是一种解决方案。

【参考方案3】：

垂直对齐确实不适用于浮动元素。那是因为 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; 

不知道为什么需要固定宽度、显示：inline-block 和浮动。

【讨论】：

您能否在答案中添加一些代码以说明如何实现解决方案？

另外，“正确答案”很容易被破解......这让我想知道地球上有 19 个人如何投票。

问题说“他需要 float:right 在最后一个元素上”，所以他可能需要最后一个元素位于容器的右侧。如何在您的答案中实现该目标？

很好的答案，而且很清楚！它只是缺少 Flexbox 选项。