如何通过CSS实现按钮背景图上文字居中并满足尺寸间距要求

修复后的CSS代码 #

.btn{
    display: inline-block;
    width: 200px;
    /* 用上下padding直接实现文字与图片上下各8px的间距要求 */
    padding: 8px 0;
    box-sizing: border-box;
    background-image: url('https://upload.cc/i1/2021/09/12/IX7D1d.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
}
.txt{
    font-size: 26px;
    /* 清除p标签默认的上下外边距，避免间距异常 */
    margin: 0;
}

原有HTML代码无需修改 #

<a class="btn" href="javascript:;">
    <p class="txt">send</p>
</a>

核心修改说明 #

• 移除了.btn的固定height:100px属性，改为通过padding控制间距，高度随内容自适应更符合设计要求
• 修正了原代码中重复定义background-size的问题，设置为100% 100%保证背景图完全适配按钮尺寸，宽度严格为200px
• 清除了<p>标签默认自带的上下外边距，避免额外撑开间距导致布局偏差
• 把文字水平居中的属性移到了按钮容器上，层级逻辑更合理

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