如何使用 col-md-6 使 div 居中？

Question

我需要在中心显示 class="col-md-6"

这是代码，它在左侧显示我的计时器我需要在中心显示时间

<div class="container">
  <div class="row">
    <div class="wpb_column vc_column_container col-md-6">
      <div class="vc_column-inner ">
        <div class="wpb_wrapper">
          <div class="event-wrapper featured-event  ">

            <!-- the loop -->
            <div class="upcoming-campaign">
              <img width="555" height="400" src="http://andrejceccoli.com/wp-content/uploads/2016/10/elezioni_sfondo.jpg" class="img-responsive wp-post-image" alt="Elezioni Politiche">
              <div class="campaign-scoop">
                <h3 class="title"><a href="http://trendytheme.net/demo2/wp/nominee/onepage/event/election-campaign/">Elezioni Politiche</a></h3>

                <span class="start-date">Inizia il: <span class="colored">20 Nov 2016</span></span>

                <div class="countdown-wrapper">
                  <ul class="countdown list-inline" data-countdown="2016-11-20">
                    <li><span class="days">38<span><p>Days</p></span></span>
                    </li>
                    <li><span class="hours">07<span><p>Hour</p></span></span>
                    </li>
                    <li><span class="minutes">48<span><p>Minutes</p></span></span>
                    </li>
                    <li><span class="second">12<span><p>Second</p></span></span>
                    </li>
                  </ul>
                </div>
                <address><i class="fa fa-map-marker"></i>San Marino</address>
                <span class="event-duration colored"><i class="fa fa-clock-o"></i>08:00 AM - 23:00 PM</span>
              </div>
              <!-- .campaign-scoop -->
            </div>
            <!-- .upcoming-campaign -->
            <!-- end of the loop -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

原文由 poopp 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

引导程序 3

添加 col-md-offset-3 将偏移 3 列的类，假设 Bootstrap 有一个 12 列的网格，这将在中心放置一个 col-md-6 元素。

偏移量的文档参考。

引导程序 4

使用 offset-3 或 mx-auto 使 col-md-6 列居中

原文由 Niels Keurentjes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只需添加“浮动：无；保证金：自动；”你的 div 风格是这样的：

 <div class="col-lg-6" style="float:none;margin:auto;">
   .....
</div>

希望有用 ;)

原文由 Ali Mahmoodi 发布，翻译遵循 CC BY-SA 4.0 许可协议