如何缩短按钮并解决背景颜色过度延伸的问题？

问题出在你的.button是块级元素，默认会占满父容器的可用宽度，导致背景左右撑满；之前调整宽度后没处理居中逻辑，所以按钮偏左/偏右。以下是两种简单的修复方案：

方案一：让按钮宽度自适应内容并自动居中 #

给.button添加display: inline-block，它的宽度会自动包裹内部文字，同时因为父容器.dr-text已经设置text-align: center，按钮会自动居中，无需额外调整位置：

修改后的CSS：

.button{
    background-color: green;
    border-radius: 30px;
    padding: 10px 30px; /* 调整内边距，让按钮上下左右都有合适空间 */
    display: inline-block; /* 关键：让按钮宽度由内容决定 */
}
.button-text h1{
    color: black;
    font-size: 30px;
    margin: 0; /* 去掉h1默认外边距，避免按钮内部空间冗余 */
}

方案二：固定宽度并手动居中 #

如果需要给按钮设置固定宽度，要配合margin: 0 auto实现居中，同时确保内部文字也居中：

.button{
    background-color: green;
    border-radius: 30px;
    padding: 5px;
    width: 200px; /* 设置固定宽度 */
    margin: 0 auto; /* 水平居中 */
    text-align: center; /* 让内部文字居中 */
}
.button-text h1{
    color: black;
    font-size: 30px;
    margin: 0;
}

为什么单独用Width属性没效果？ #

块级元素默认左对齐，你单独设置width后，按钮会靠左显示；必须加上margin: 0 auto才能让它在父容器里居中。相比之下方案一的inline-block更省心，直接利用父容器的居中属性就能实现效果。

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