Html 文本居中对齐

这是我的文本css，但文本不在中心。请给我解释一下为什么它不在中心

.button {
            background-color: #338DFF;
            border: none;
            width : 15px;
            height : 15px;
            color: white;
            border-style: solid;
            line-height: 2px;
            border-color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            margin: 4px 2px;
            font-size: 16px;
            cursor: pointer;
        }

---

这是因为

填充

和

高度

属性。拆下它们并提供所需的高度和宽度

。按钮{
背景色：#338DFF；
边界：无；
宽度：75px；
高度：20px；
颜色：白色；
边框样式：实心；
边框颜色：白色；
文本对齐：居中；
文字装饰：无；
利润：4倍2倍；
字体大小：16px；
光标：指针；
}

---

按钮

添加

垂直对齐：中间


。按钮{
背景色：#338DFF；
边界：无；
宽度：75px；
高度：20px；
颜色：白色；
边框样式：实心；
边框颜色：白色；
文本对齐：居中；
文字装饰：无；
利润：4倍2倍；
字体大小：16px；
光标：指针；
垂直对齐：中间；/*添加了此选项**/
}
按钮
它居中了问题在于宽度，正如您所看到的，您只有15像素来显示文本，文本太大，溢出了区域，看起来没有居中


。按钮{
背景色：#338DFF；
边界：无；
/*宽度：15px；这是为文本设置一个小区域*/
高度：15px；
颜色：白色；
边框样式：实心；
线高：2px；
边框颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
利润：4倍2倍；
字体大小：16px；
光标：指针；
}
测试
删除
宽度
就这样


。按钮{
背景色：#338DFF；
边界：无；
高度：15px；
颜色：白色；
边框样式：实心；
线高：2px；
边框颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
利润：4倍2倍；
字体大小：16px；
光标：指针；
}
按钮
您正在指定高度、宽度、线条高度和填充。填充高度和宽度有时会增加元素的大小。
对于您的情况，只需删除宽度，文本将居中对齐。
这是
填充属性。
您是否尝试过文本对齐：居中！重要的；当处理CSS问题时，通常从“我可以/需要删除什么”开始是一个很好的做法-简单有时更好感谢大量帮助