如何实现带多行垂直居中文字的圆形按钮横向居中排列？

要实现三个圆形按钮横向居中排列，且每个按钮内的多行文字垂直+水平居中，可以通过嵌套Flex布局完成，结合你之前的两种尝试，调整如下：

最终代码 #

HTML

<div class="button-container">
    <div class="circle-button">
        <p>vertical on <br>pseudo huehue <br>lol wpizdu</p>
    </div>
    <div class="circle-button">
        <p>vertical on <br>pseudo huehue <br>lol wpizdu</p>
    </div>
    <div class="circle-button">
        <p>vertical on <br>pseudo huehue <br>lol wpizdu</p>
    </div>
</div>

CSS

.button-container {
  display: flex;
  justify-content: center; /* 控制按钮组横向居中 */
  gap: 20px; /* 按钮间的间距，可按需调整 */
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  padding: 20px;
  font-family: Helvetica;
}

.circle-button {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 内部文字垂直居中 */
  align-items: center; /* 内部文字水平居中 */
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
  text-align: center; /* 保证多行文字每行都居中 */
}

关键逻辑说明 #

1. 父容器（按钮容器）：

   • 设置display: flex让子按钮横向排列
   • justify-content: center直接实现按钮组的横向居中
   • gap属性统一控制按钮间距，比margin更简洁易维护

2. 单个圆形按钮：

   • 沿用你之前的display: flex + flex-direction: column + justify-content: center实现文字垂直居中
   • 新增align-items: center和text-align: center，确保多行文字的水平居中对齐
   • 保留圆形样式的width、height、border-radius: 50%

你的之前尝试问题分析 #

• 第一种尝试：仅给按钮内部加了Flex，但父容器是块级元素，按钮默认上下堆叠，给父容器加Flex即可解决横向排列问题
• 第二种尝试：用伪元素实现了按钮的垂直居中，但未处理按钮内部文字的垂直对齐，直接给按钮内部用Flex布局更直观高效

内容的提问来源于stack exchange，提问作者plushjudy