javascript - 按钮文本居中对齐 CSS

Question

我有一个按钮，其文本当前与顶部对齐。我尝试过使用 text-align: center css 但它不起作用。请查看演示链接并指出我哪里出错了。

我尝试过的代码。

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

注意:它使用 bootstrap 和自定义 css

查看完整的工作演示

http://www.codeply.com/go/PJVAHxQ2z4

谢谢

Answer 1

The text-align property specifies the horizontal alignment of text in an element.

注意:不是对象的垂直对齐!

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

http://www.codeply.com/go/Vi7NWQz7jb

仔细看看

.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>