html - 使用按钮居中内容 block

Question

The center-block class of Bootstrap在图像、调整大小的 block 元素(如 div)和显然在按钮中有效。

当按钮类应用于链接(成为伪按钮)时，它不会水平居中。

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

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>