使用引导程序使列居中 [重复]

Posted 2023-03-05

【中文标题】使用引导程序使列居中 [重复]

【英文标题】：Centering a Column Using Bootstrap [duplicate]

【发布时间】：2016-06-20 08:33:26

【问题描述】：

我有以下代码：

    <div class="row">
        <div class="col-xs-12" id="buttonList">
            <ul class="list-inline">
                <li><button id="homeBtn" type="button" class="smallMarginB headerButton active btn btn-sm btn-primary">Home</button></li>
                <li><button id="aboutBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">About</button></li>
                <li><button id="servicesBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Services</button></li>
                <li><button id="transBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Transformations</button></li>
                <li><button id="testBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Testimonials</button></li>
                <li><button id="contactBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Contact</button></li>
                <li><button id="faqBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">FAQ</button></li>
            </ul>
        </div>
    </div>

它只是在一列中显示按钮。无论用户的分辨率如何，我都希望它居中。我曾尝试使用偏移量，但对于奇怪的分辨率它不起作用（例如分辨率为 1366 像素）。我也尝试过添加 col-centered 和 margin: auto 但没有成功。

【问题讨论】：

尝试使用text-align:center添加一个类

【参考方案1】：

尝试将class="text-center" 添加到 div col 元素：

<div class="col-xs-12 text-center" id="buttonList">

【讨论】：

哇，谢谢。当 center-block 和 margin: auto;没有？

margin: auto 适用于块元素，而 text-align:center 适用于内联元素。在这种情况下，您的项目是 display: inline-block。我希望这会有所帮助。对不起，我的英语，我说西班牙语：P

【参考方案2】：

你可以试试：

margin-left:auto; margin-right:auto 用于水平对齐；

margin-top:auto; margin-bottom:auto，用于垂直对齐

或

margin:auto 两者兼而有之。

【讨论】：

我也试过了。出于某种原因，它只会将列稍微向右移动（大约 5px）