CSS 如何使用 col-md-6 居中 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40002198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center div with col-md-6?
提问by poopp
I need to display in the center the div with class="col-md-6"
我需要在中心显示 div class="col-md-6"
This is the code, that display me the timer at the left I nee to display time in the center
这是代码，在左侧显示计时器我需要在中心显示时间
<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>
回答by Niels Keurentjes
Bootstrap 3
引导程序 3
Add the col-md-offset-3class that will offset by 3 columns, given that Bootstrap has a 12-column grid this will put a col-md-6element right in the center.
添加col-md-offset-3将偏移 3 列的类，因为 Bootstrap 有一个 12 列的网格，这会将一个col-md-6元素放在中心。
Documentation reference on offsets.
Bootstrap 4
引导程序 4
Use offset-3or mx-autoto center a col-md-6column
使用offset-3或mx-auto使col-md-6列居中
回答by Mostafa Baezid
As I see you are using wordpress. And the code you placed is not end properly. If I'm not wrong there is also other part of col-md-6 you have in the row. So easily you can set the time in center .upcoming-campaign { text-align: center; } adding this. If any Question ask me in comment.
正如我所看到的，您正在使用 wordpress。并且您放置的代码未正确结束。如果我没记错的话，你还有 col-md-6 的其他部分。您可以轻松地在 center .upcoming-campaign { text-align: center; 中设置时间。添加这个。如果有任何问题，请在评论中问我。
.upcoming-campaign {
text-align: center;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<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>
<!-- end of event-wrraper -->
</div>
<!-- end of wpb-wrapper -->
</div>
<!-- end of vc_colum-inner -->
</div>
<!-- end of col-md-6 [1] -->
<div class="wpb_column vc_column_container col-md-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
</div>
<!-- end of wpb-wrapper -->
</div>
<!-- end of vc_colum-inner -->
</div>
<!-- end of col-md-6 [2] -->
</div>
<!-- end of Row -->
</div>
<!-- end of the Container -->
</body>回答by ali mahmoodi
Just add "float:none;margin:auto;" to your div style like this :
只需添加“浮动：无；边距：自动；” 像这样的 div 样式：
<div class="col-lg-6" style="float:none;margin:auto;">
.....
</div>
Hope to be useful ;)
希望有用;)
