如何实现按钮文本的顶部居中对齐？

你的代码存在两个核心问题：

• 文本<div>采用绝对定位，但父元素<a>未设置position: relative，导致定位参考对象是整个文档而非按钮容器
• 你给文本设置了bottom: 5px，这会强制文本固定在底部，和顶部居中的需求完全相反

下面提供两种可行的实现方式：

方案一：将文本放入按钮内部（推荐） #

直接把文本嵌套进<button>标签，利用flex布局快速实现顶部居中，同时保留背景图效果：

<a href="flappy">
    <button class="zoom" id="yes" style="width: 140px; height: 120px; border-radius: 20px; border-width: 0; font-family: 'Roboto', sans-serif; font-size: 20px; background-image: url(/images/flappy.jpeg); background-size: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 8px; color: #111;">
        Flappy Bird
    </button>
</a>

关键样式说明：

• display: flex：开启flex布局模式
• justify-content: flex-start：让内容沿垂直方向靠顶部排列
• align-items: center：让内容沿水平方向居中
• padding-top: 8px：可根据需求调整文本与按钮顶部的间距

方案二：调整外部文本的定位规则 #

如果不想修改原有结构，只需给父元素<a>添加相对定位，再调整文本<div>的定位属性：

<a href="flappy" style="position: relative; display: inline-block;">
    <button class="zoom" id="yes" style="width: 140px; height: 120px; border-radius: 20px; border-width: 0; font-family: 'Roboto', sans-serif; font-size: 20px; background-image: url(/images/flappy.jpeg); background-size: 100%;"></button>
    <div style="color: #111; position: absolute; top: 8px; left: 0; right: 0; text-align: center;">Flappy Bird</div>
</a>

关键修改点：

• 给<a>添加position: relative; display: inline-block;，让内部绝对定位的元素以它为参考容器
• 将文本<div>的bottom: 5px改为top: 8px，并设置left:0; right:0; text-align: center;实现水平居中

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