Javascript 按钮文本对齐到中心CSS

我有一个按钮，当前文本与顶部对齐。我尝试过使用文本对齐：居中css，但它不起作用。请查看演示的链接，并告知我哪里出了问题

我试过的代码

.productButton {
    height: 130px;
    width: 200px;
    font-size: 35px;
    text-align:center;

注意：它与自定义css一起使用引导

请参阅完整的工作演示

谢谢

“文本对齐”特性指定文本的水平对齐方式 元素

注意：不是对象的垂直对齐

以下是您的问题的可能解决方案：

细看

.btn--text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

以及标签中为该css添加的div

     <label class="btn btn-default productButton">
           <div class="btn--text">ButtonText</div>
           <input type="radio" name="ButtonOne" id="buttonOne" autocomplete="off" checked>
     </label>

按钮文字

线条高度应与高度相同，然后添加垂直对齐：中间；和填充顶部：0才能工作

这里举一个例子：

---

文本对齐是水平的。只需将线条高度设置为与按钮相同的高度。i、 e.130px