如何实现圆形图标与文本行的垂直居中对齐？

编辑说明：已有其他帖子解答了该问题，但我仍保留此帖，因为部分用户不知道这涉及“flexbox垂直对齐”技巧，本帖可作为相关链接入口。

问题描述 #

我希望让圆形图标的中线与文本行对齐。我已尝试使用flexbox甚至grid布局，但仍未找到问题所在。

预期效果 #

解决方案 #

问题出在你把flex布局加在了外层div上，但按钮内部的文本和圆形元素并没有被flex布局管控。只需要给按钮本身设置flex布局，就能轻松实现垂直对齐啦：

div {
  display: flex;
  align-items: center;
}

#record {
  grid-area: text;
  border: 1px solid #656666;
  margin-left: 3.8em;
  margin-top: 0.3em;
  width: 10rem;
  height: 3rem;
  background-color: white;
  font-family: 'Tajawal', sans-serif;
  font-size: 1.5em;
  /* 核心修改：给按钮设置flex布局，管理内部元素 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em; /* 给文本和圆形添加间距，优化视觉效果 */
}

#circle {
  background: red;
  width: 25px;
  height: 25px;
  border-radius: 50%; /* 简化圆角写法 */
}

<div>
  <button id="record"> 
    Record 
    <div id="circle"></div>
  </button>
</div>

小说明 #

• 给#record按钮加display: flex后，内部的文本和圆形都会被flex布局接管
• align-items: center能让子元素在垂直方向上居中，刚好实现圆形中线和文本中线对齐的需求
• justify-content: center保证按钮内的元素整体水平居中，保留原有的文本居中效果
• gap属性用来拉开文本和圆形的距离，让布局更协调自然

内容的提问来源于stack exchange，提问作者Diagathe Josué