在按钮内居中文本

Question

我正在学习前端开发,我正在尝试使用bootstrap编写我的第一个站点.我猜,我陷入了一个非常简单的事情.如何将文本置于按钮中心？

这是按钮,默认使用"a"标签.

<a class="btn btn-default btn-work" href="#">Check my work</a>

并给它一个宽度和一个高度,文字仍然卡在顶部..

.btn-work {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    vertical-align: middle;
}

我也试图将按钮对准容器的中心,我也无法弄明白.

谢谢 !

Answer 1

使文本在按钮中居中.使用此代码.

.btn-work{ text-align: center; }

要使按钮居中,请使用父div将其与中心对齐.

CSS:

 div.parentElement{text-align: center;}
 .btn-work{ display: inline-block; }

HTML:

<div class="parentElement">
    <a class="btn btn-default btn-work" href="#">Check my work</a>
</div>

完整的CSS:

div.parentElement{text-align: center;}

.btn-work {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    line-height: 50px;
    text-align: center;
}

Answer 2

看到这个小提琴

用

display: table-cell;
vertical-align: middle;

在您的CSSfor .btn-work.

所以，完整的 CSS 应该是这样的

.btn-work {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
}

而且，上面的输出就像

Answer 3

我只是发现而已。

只需使用

line-height: 0px;

在你的按钮 CSS 中。

现在，你的 CSS 看起来像这样:-

.btn{ line-height: 0px;}