在按钮内居中 [英] Centering text within a button

问题描述

我正在学习前端开发，并且正在尝试使用引导程序对我的第一个站点进行编码。我被困在一件很简单的事情上。
如何在按钮内使文本居中？

I'm learning Front end development and I'm trying to code my first site using bootstrap. I got stuck on a pretty simple thing I guess. How do I center a text within a button ?

这是按钮，默认按钮使用 a标签。

This is the button, the default one using an "a" tag.

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

并为其指定宽度和高度，文本仍停留在顶部。 >

and gave it a width and a height and the text remains stuck on the top..

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

我也在尝试将按钮对准容器的中心，然后我也不知道。

I'm also trying to align the button to the center of the container and I can't figure that out either.

谢谢！

推荐答案

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

To center the text within the button. Use this code.

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

要使按钮居中，请使用父级div使其居中对齐。

To center the button, use a parent div to align it to center.

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;
}

这篇关于在按钮内居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！