Question

The center-block class of Bootstrap在图片中有效，在调整大小的块元素（如div s）中，显然在按钮中。

当按钮类应用于链接（变为伪按钮）时，不会水平居中。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<button type="button" class="btn btn-default center-block">Pure button</button>
<a href="#" class="btn btn-default center-block">Link button</a>

＆＃13;

appearance具有button值的CSS属性不起作用。设置固定维度（width，max-width或min-width）不是一个好的解决方案。

This trouble was ignored in GitHub

Answer 1

Display: block在buttons和其他元素（例如a）上以其他方式工作。您需要将display: table添加到链接而不是display: block;。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<style>
a.btn-default {display: table}
</style>

<button type="button" class="btn btn-default center-block">Pure button</button>
<a href="#" class="btn btn-default center-block">Link button</a>

使用按钮居中内容块

1 个答案: