如何在 CSS 中垂直对齐内联/内联块元素？

在 CSS 中垂直对齐内联/内联块元素

在创建垂直对齐布局时，了解 CSS 中的垂直对齐至关重要。尽管应用了适当的垂直对齐属性，元素可能会持续不可预测地移动。

以提供的示例为例：

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

这里，尽管应用了“垂直对齐”和“垂直对齐”属性，但 span 元素仍然被推下。 ：中间;”

解决这个问题的关键在于理解“vertical-align”适用于要对齐的元素，而不是其父容器。要垂直对齐“div”元素的子元素，请使用 CSS 规则：

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

通过此更改，“div”元素的子元素将在父 div 内垂直对齐。

注意：“vertical-align”相对于当前文本行对齐，而不是容器div的完整高度。要将元素在较高的父 div 中居中，请设置父 div 的“line-height”属性而不是其高度。有关实际示例，请参阅原始问题中提供的 jsfiddle 链接。

以上是如何在 CSS 中垂直对齐内联/内联块元素？的详细内容。更多信息请关注PHP中文网其他相关文章！