css行内元素的垂直居中

使用vertical-align、line-height、Flexbox或伪元素可实现行内元素垂直居中；具体方法包括设置vertical-align: middle配合line-height，或使用Flex布局的align-items: center，以及通过伪元素与inline-block协同对齐。

如果您希望在网页布局中让CSS行内元素在容器内垂直居中显示，通常会遇到默认基线对齐导致未真正居中的问题。以下是实现该效果的具体方法：

本文运行环境：MacBook Pro，macOS Sonoma。

一、使用 vertical-align 属性

vertical-align 可以控制行内元素或表格单元格内容的垂直对齐方式，常用于将行内元素相对于父元素基线进行调整。

1、为需要居中的行内元素设置 vertical-align: middle。

立即学习“前端免费学习笔记（深入）”；

2、确保其父容器具有合适的行高（line-height）或采用伪元素辅助对齐。

3、示例代码：
  <span style="vertical-align: middle;">居中文本</span>

二、利用 line-height 与 height 相等

当容器高度固定时，可通过设置 line-height 等于容器 height 实现单行文本的垂直居中。

1、设定容器的 height 和 line-height 值相同。

2、将文本以行内元素形式放入该容器中。

课游记AI

AI原生学习产品

86

查看详情

3、注意此方法仅适用于单行文本内容。

三、采用 Flexbox 布局模型

将父容器设为 Flex 容器，可以轻松实现其内部行内元素的垂直居中。

1、设置父元素 display 属性为 flex。

2、应用 align-items: center; 来启用交叉轴上的居中对齐。

3、此时其内的行内子元素将自动垂直居中显示。

四、借助伪元素实现 inline-block 居中

通过添加一个与行内元素同高的匿名伪元素，并利用 vertical-align 进行对齐，可达到视觉上的垂直居中。

1、在父容器中插入一个高度等于容器高度的伪元素。

2、设置该伪元素和目标行内元素均为 vertical-align: middle。

3、伪元素 CSS 示例：
  &::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

以上就是css行内元素的垂直居中的详细内容，更多请关注php中文网其它相关文章！