Question

我试图让此页面上的定价表居中：http://CloseDeals.co/sponsored

我使用bootstrap所以也许有一种方法可以移动列？

它目前在左侧是合理的，但我希望它居中。

以下是代码：

<section id="pricing" class="pricing">
<div class="container">
    <div class="row m-b-lg">
        <div class="col-lg-12 text-center">
            <div class="navy-line"></div>
            <h1><span class="navy"><strong>Get 50% Off Through This Sponsored Link!</strong></span></h1>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 wow zoomIn">
            <ul class="pricing-plan list-unstyled">
                <li class="pricing-title">
                    Monthly
                </li>
                <li class="pricing-desc">
                    21-day FREE Trial
                </li>
                <li class="pricing-price">
                    <s>$40</s> <span>$20</span>
                </li>
               <li>
                    Unlimited Sequences
                </li>
                <li>
                    Unlimited Active Contacts
                </li>
                <li>
                    Un-Sponsored Emails
                </li>
                <li>
                    Email & Chat Support
                </li>
                <li>
                    Import Contacts
                </li>
                <li>
                    API & Zapier Access
                </li>
            </ul>
        </div>

        <div class="col-lg-4 wow zoomIn">
            <ul class="pricing-plan list-unstyled selected">
                <li class="pricing-title">
                    Annual
                </li>
                <li class="pricing-desc">
                    21-day FREE Trial
                </li>
                <li class="pricing-price">
                  <s>$400</s> <span>$200</span>
                </li>
                <li>
                    Unlimited Sequences
                </li>
                <li>
                    Unlimited Active Contacts
                </li>
                <li>
                    Un-Sponsored Emails
                </li>
                <li>
                    Email & Chat Support
                </li>
                <li>
                    Import Contacts
                </li>
                <li>
                    API & Zapier Access
                </li>
                <li>
                    <strong>2 Months FREE!</strong>
                </li>
            </ul>
        </div>
    </div>
    <div class="row m-t-lg">
        <div class="col-lg-8 col-lg-offset-2 text-center m-t-lg">
            <a class="btn btn-primary btn-xs" href="http://app.closedeals.co/users/sign_up/fbs">Start Your 21-Day FREE Trial</a>
        </div>
    </div>
</div>


</div>

</section>

我尝试添加：

<div class="container" align="center">

Answer 1

您可以使用flexbox将此代码放入两个框的父级

 YOUR CONTAINER{
    display: flex;
    justify-content: center;
}

Answer 2

页面有自举，所以你可以使用偏移类，我在检查器中尝试偏移2并且看起来不错

glBegin()/glEnd()

如果您愿意，可以尝试其他值：

<强> COL-LG-偏移-2

这里有更多信息： bootstrap grid offseting

Answer 3

您想要抵消第一张定价表吗？

您可以为第一个项目添加偏移量。

<div class="col-lg-4 col-lg-offset-2 wow zoomIn animated">

CSS样式以div为中心

3 个答案: