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
)并不是一个好的解决方案。
最佳答案
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>
关于html - 使用按钮居中内容 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47938099/