Question

在我的项目中，我需要制作一个bootsrap's成功按钮，其中有一个很小的假设。问题是此按钮中的文本未与按钮的中心对齐。它必须大左填充。那么我该如何解决呢？

PS

The picture is something like that:

+------+
|  text|
+------+

I want:

+------+
| text |
+------+

代码：

HTML:

btn1.setAttribute("class", "btn btn-success card_btn");
btn1.innerHTML = "To solitaire";
btn1.onclick = to_solitaire;


CSS:

.btn {
    text-align: center;
    padding: 2px;
}

`

Answer 1

这里不需要为bootstrap中的任何样式添加css，所有样式都是内置的

在btn班级中，text-align:center为默认

例如像这样使用：

<input type="button" class="btn btn-success" value="Text" />

输出：

+------+
| Text |
+------+

以下是FIDDLE

Answer 2

我在使用glyphicon和text时遇到了类似的问题。简单的代码和css重新排列有很大帮助：

HTML：

<button type="button" class="btn btn-default ">
   <span class="glyphicon glyphicon-paperclip"></span>
   &nbsp;Upload
</button>

CSS：

.btn{text-align: left;}

我的错误是文本在跨度内。无论我申请什么CSS，都不会发生任何事情。事实上，它看起来不仅仅是中心的。

引导按钮文本对齐

2 个答案: