如何让按钮间文本与按钮垂直居中对齐（HTML/CSS）

问题现状 #

你编写的图片尺寸调整按钮代码存在两个问题：

• 中间文本无法与按钮垂直居中对齐
• text-align:center属性未生效

你的原始代码如下：

原始HTML

<span class="size-change">
            <button id="minus">-</button>
            <p id="size-no">Size: 50</p>
            <button id="plus">+</button>
</span>

原始CSS

.size-change {
    height: 28px;
    line-height: 28px;
    font-size: 25px;
    text-align: center;
}

.size-change button {
    width: 28px;
    height: 28px;
}

问题原因 #

1. <p>是块级元素，默认独占一行，导致按钮和文本无法在同一行排列，自然无法实现垂直对齐
2. <span>是行内元素，text-align:center对其内部子元素的布局控制能力有限，无法实现整体水平居中

解决方案 #

修改HTML结构并使用flex布局，实现稳定的对齐效果：

修改后的HTML

<span class="size-change">
    <button id="minus">-</button>
    <span id="size-no">Size: 50</span>
    <button id="plus">+</button>
</span>

修改后的CSS

.size-change {
    display: flex;
    align-items: center; /* 实现子元素垂直居中 */
    justify-content: center; /* 实现整体水平居中 */
    font-size: 25px;
    gap: 8px; /* 可选：控制元素间的间距，优化视觉效果 */
}

.size-change button {
    width: 28px;
    height: 28px;
}

说明 #

• 替换<p>为<span>：将块级元素换成行内元素，确保按钮和文本能在同一行排列
• 使用flex布局：display:flex是现代布局方案，align-items:center和justify-content:center可以轻松实现垂直和水平居中，比传统的line-height和text-align更稳定、适配性更强
• 可选的gap属性：无需手动设置margin，就能方便控制元素间的间距

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