按钮文本居中对齐 CSS

Question

我有一个按钮，其文本当前对齐到顶部。我试过使用 text-align: center css 但它没有用。请查看 link 演示并告知我哪里出错了。

我试过的代码。

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

Answer 2

你的line-height应该和你的高度一样，然后加上vertical-align:middle;和 padding-top:0 工作。

举个例子： http://www.codeply.com/go/IgJ3Yrn9Kq