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

text-align属性指定文本的水平对齐方式一个元素。

注意：不是对象的垂直对齐方式！

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

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

您的行高应与您的高度相同，然后添加vertical-align：middle;和padding-top：0工作。

这里有一个例子： http://www.codeply.com/go/IgJ3Yrn9Kq

按钮文本与CSS中心对齐

2 个答案: