Javascript 顶部的文本在按钮中不居中

我有一个按钮，上面有文字

这是代码

.settings按钮新建{
宽度：150px；
高度：150像素；
文字装饰：无；
线高：14px；
文本对齐：居中；
位置：相对位置；
左边距：20px；
边缘底部：20px；
边框：实心4px#d3dbde；
-webkit边界半径：13px；
-moz边界半径：13px；
边界半径：13px；
字体：15px Arial，Helvetica，无衬线；
颜色：#1c559b；
背景色：#ffffff；
背景图像：-莫兹线性梯度（顶部，#ffffff 0%，#FCFC 100%）；
背景图像：-webkit线性渐变（顶部，#ffffff 0%，#FCFC 100%）；
背景图像：-o-线性梯度（顶部，#ffffff 0%，#FCFC 100%）；
背景图像：-ms线性梯度（顶部，#ffffff 0%，#FCFC 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#fcfcfc'，endColorstr='#fcfcfc'，GradientType=0）；
背景图像：线性渐变（顶部，#ffffff 0%，#FCFC 100%）；
-网络工具包盒阴影：0px 0px 2px#bababa，插图0px 0px 1px#ffffff；
-moz盒阴影：0px 0px 2px#bababa，插图0px 0px 1px#ffffff；
盒影：0px 0px 2px#bababa，插图0px 0px 1px#ffffff；
}
.设置按钮新建范围{
显示：块；
位置：绝对位置；
排名：0；
左：0；
}

---

Home

只需在下方添加css代码作为中心，如果不需要垂直居中，则

顶部：0或根据您的需要和
转换：translate（-50%，0）


.settings按钮新建{
宽度：150px；
高度：150像素；
文字装饰：无；
线高：14px；
位置：相对位置；
左边距：20px；
边缘底部：20px；
边框：实心4px#d3dbde；
-webkit边界半径：13px；
-moz边界半径：13px；
边界半径：13px；
字体：15px Arial，Helvetica，无衬线；
颜色：#1c559b；
背景色：#ffffff；
背景图像：-莫兹线性梯度（顶部，#ffffff 0%，#FCFC 100%）；
背景图像：-webkit线性渐变（顶部，#ffffff 0%，#FCFC 100%）；
背景图像：-o-线性梯度（顶部，#ffffff 0%，#FCFC 100%）；
背景图像：-ms线性梯度（顶部，#ffffff 0%，#FCFC 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#fcfcfc'，endColorstr='#fcfcfc'，GradientType=0）；
背景图像：线性渐变（顶部，#ffffff 0%，#FCFC 100%）；
-网络工具包盒阴影：0px 0px 2px#bababa，插图0px 0px 1px#ffffff；
-moz盒阴影：0px 0px 2px#bababa，插图0px 0px 1px#ffffff；
盒影：0px 0px 2px#bababa，插图0px 0px 1px#ffffff；
}
.设置按钮新建范围{
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
Home
}
也许这段代码可以帮助您


.settings按钮新建{
宽度：150px；
高度：150像素；
文字装饰：无；
线高：14px；
文本对齐：居中；
位置：相对位置；
左边距：20px；
边缘底部：20px；
边框：实心4px#d3dbde；
-webkit边界半径：13px；
-moz边界半径：13px；
边界半径：13px；
字体：15px Arial，Helvetica，无衬线；
颜色：#1c559b；
背景色：#ffffff；
背景图像：-莫兹线性梯度（顶部，#ffffff 0%，#FCFC 100%）；
背景图像：-webkit线性渐变（顶部，#ffffff 0%，#FCFC 100%）；
背景图像：-o-线性梯度（顶部，#ffffff 0%，#FCFC 100%）；
背景图像：-ms线性梯度（顶部，#ffffff 0%，#FCFC 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#fcfcfc'，endColorstr='#fcfcfc'，GradientType=0）；
背景图像：线性渐变（顶部，#ffffff 0%，#FCFC 100%）；
-网络工具包盒阴影：0px 0px 2px#bababa，插图0px 0px 1px#ffffff；
-moz盒阴影：0px 0px 2px#bababa，插图0px 0px 1px#ffffff；
盒影：0px 0px 2px#bababa，插图0px 0px 1px#ffffff；
}
.设置按钮新建范围{
显示：块；
位置：绝对位置；
排名：0；
左：50%；
转化：translateX（-50%）；
}
Home
您可以将span更改为div吗，文本对齐：然后中心将正常工作
您可以使用删除垂直对齐文本，而无需绝对定位：您可以为此使用
垂直对齐
和伪元素

也


在这种情况下，您不需要绝对位置（和
文本对齐：居中
）
我建议您删除带有供应商前缀的属性，因为它们适用于非常旧的浏览器
线性渐变
适用于
背景
，而不是
背景图像
属性

演示：


/*在顶部对齐按钮文本的样式*/
.设置按钮新建：之后{
内容：“；
显示：内联块；
垂直对齐：顶部；
身高：继承；
}
/*在顶部对齐按钮文本的样式*/
.设置按钮新建范围{
垂直对齐：顶部；
显示：内联块；
}
/*清理按钮样式*/
.设置按钮新建{
宽度：150px；
高度：150像素；
文字装饰：无；
左边距：20px；
边缘底部：20px；
边框：实心4px#d3dbde；
边界半径：13px；
字体：15px Arial，Helvetica，无衬线；
颜色：#1c559b；
背景：fff线性梯度（顶部，fff 0%，FCFC 100%）；
盒影：0px 0px 2px#bababa，插图0px 0px 1px#fff；
}

家
删除该位置。只需添加
边距：auto


.settings按钮新建{
宽度：150px；
高度：150像素；
文字装饰：无；
线高：14px；
文本对齐：居中；
位置：相对位置；
左边距：20px；
边缘底部：20px；
边框：实心4px#d3dbde；
-webkit边界半径：13px；
-moz边界半径：13px；
边界半径：13px；
字体：15px Arial，Helvetica，无衬线；
颜色：#1c559b；
背景色：#ffffff；
背景图像：-莫兹线性梯度（顶部，#ffffff 0%，#FCFC 100%）；
背景图像：-webkit线性渐变（顶部，#ffffff 0%#
.settings-button-new span {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

.settings-button-new span {
margin: 0px;
text-align: center;