在按钮内居中文本

Question

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

这是按钮，默认使用＆＃34; a＆＃34;标签

<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

请参阅此fiddle

使用

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

CSS .btn-work。

因此，完整的CSS就像

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

而且，上面的输出就像

Answer 3

在这里，您可以将链接设为按钮。您可以在标签内部创建一个按钮。

$("#dropdown").change(function(){
//reinitialize date-picker here
});

Answer 4

我刚刚发现它。

随便用

line-height: 0px;

在您的按钮 CSS 中。

现在，您的 CSS 将如下所示:-

.btn{ line-height: 0px;}