内联/内联块元素的 CSS 垂直对齐

Posted 2023-03-05

【中文标题】内联/内联块元素的 CSS 垂直对齐

【英文标题】：CSS vertical alignment of inline/inline-block elements

【发布时间】：2012-03-29 01:16:40

【问题描述】：

我试图让几个inline 和inline-block 组件在div 中垂直对齐。为什么这个例子中的span 坚持被推倒？ vertical-align:middle; 和 vertical-align:top; 我都试过了，但没有任何变化。

HTML：

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

CSS：

a 
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;


div 
    background:yellow;
    vertical-align:middle;

span 
    background:red;

​ 结果：

FIDDLE

【问题讨论】：

请注意，如果<a> 元素中包含一些文本see this link，则不会发生这种情况

【参考方案1】：

vertical-align 适用于对齐的元素，而不是它们的父元素。要垂直对齐 div 的子项，请改为：

div > * 
    vertical-align:middle;  // Align children to middle of line

见：http://jsfiddle.net/dfmx123/TFPx8/1186/

注意：vertical-align 相对于当前文本行，而不是父 div 的全高。如果您希望父 div 更高并且仍然使元素垂直居中，请设置 div 的 line-height 属性而不是其 height。以上面的 jsfiddle 链接为例。

【讨论】：

如果您为外部div 指定高度，这将停止工作。

@AbhranilDas vertical-align 相对于当前文本行，而不是父元素。要使这项工作如您所愿，请设置 div 的 line-height 而不是其 height。

【参考方案2】：

在a 和span 中提供vertical-align:top;。像这样：

a, span
 vertical-align:top;

查看http://jsfiddle.net/TFPx8/10/

【参考方案3】：

只需将两个元素都向左浮动即可获得相同的结果。

div 
background:yellow;
vertical-align:middle;
margin:10px;


a 
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;


span 
background:red;
display:inline-block;
float:left;

【讨论】：

将它们浮动到左边的问题是当浏览器变得太小时它们会换行到下一行。有时您需要项目保持内联，甚至超出浏览器范围，因此，inline-block 是唯一的解决方案。

虽然包装问题可能存在问题，但我想说这对于包装可以的情况来说是一个非常好的解决方案。它很优雅，符合预期效果的精神，不需要对父级进行修改。

【参考方案4】：

要微调 inline-block 项目的位置，请使用 top 和 left：

  position: relative;
  top: 5px;
  left: 5px;

谢谢CSS-Tricks！

【讨论】：

translate 也是可以的。

完美运行！