Question

我有以下代码：

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

它只显示单列中的按钮。无论用户的分辨率如何，我都希望它能够居中。我尝试过使用offesets但是对于奇数分辨率它没有用（例如分辨率是1366px）。我也尝试添加col-centered和margin：auto但没有成功。

Answer 1

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

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

Answer 2

您可以尝试：

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

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

或

margin:auto两者。

使用引导程序使列居中

2 个答案: