代码之家 › 专栏 › 技术社区 › Miquel Al. Vicens

带按钮的内容块居中

twitter-bootstrap-3 twitter-bootstrap css html

Miquel Al. Vicens · 技术社区 · 7 年前

The center-block class of Bootstrap 在图像、调整大小的块元素(如 div s) 而且显然是纽扣。

什么时候 按钮类 应用于链接 (变成伪按钮),它 不居中 水平方向。

<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 CSS属性 button 值不起作用。以及设置固定尺寸( width , max-width 或 min-width )这不是一个好的解决方案。

This trouble was ignored in GitHub .

1 回复 | 直到 7 年前

pavel 7 年前

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>

推荐文章

Glyn · 如何使用jQuery更改动态创建的按钮<span>中的文本?

2 年前

Salman Abbas · 如何在导航栏切换中更改下拉菜单中链接的颜色

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Knownow · 通过导航显示背景

6 年前

Mona Coder · 删除Bootstrap 3上下拉菜单和下拉菜单之间的边框

6 年前

user9727963 · 引导和Internet Explorer 11问题

6 年前

Queen of the North · 无法更改输入表单宽度

6 年前

jaggs · 如何将java中创建的href链接传递到jsp页面

6 年前

Abu Ayyub · 引导中具有一个边框的多个输入元素

6 年前

espresso_coffee · 所选内容在我的引导/JQuery应用程序中不起作用?

6 年前