如何在Bootstrap v2环境下实现宽度不同的行内按钮居中对齐

解决方案 #

方案1：调整HTML结构（最推荐，适配性最强） #

抛弃原有的左右分半栏span6布局，改用单个全宽容器居中放置两个按钮，完全适配任意长度的自定义按钮文本，无需固定宽度或硬编码偏移量：

<div class="row-fluid visible-desktop">
    <div class="span12" style="text-align: center;">
        <a href="#"><button type="button" class="btn btn-default" style="margin-right: 12px;">Ja, tack!</button></a>
        <a href="#"><button type="button" class="btn btn-inverse">Nej tack, avsluta</button></a>
    </div>
</div>

优势：兼容Bootstrap v2支持的所有老旧浏览器（包括IE8），无需额外CSS hack，按钮文本修改后自动保持整体居中。

方案2：不修改HTML结构，仅新增CSS #

如果现有HTML结构不能改动，可以通过重置span6的默认宽度和浮动属性实现居中：
首先给外层row-fluid添加自定义类避免影响其他布局，比如命名为btn-center-container：

<div class="row-fluid visible-desktop btn-center-container">
    <!-- 原有内部代码不变 -->
</div>

新增对应CSS：

.btn-center-container .span6 {
    width: auto;
    float: none;
    display: inline-block;
}
.btn-center-container {
    text-align: center;
}
/* 调整两个按钮的间距，可根据需求修改 */
.btn-center-container .span6:first-child .btn {
    margin-right: 12px;
}

优势：无需改动原有DOM结构，同样适配任意长度的按钮文本。

内容的提问来源于stack exchange，提问作者Xariez