Как центрировать div с col-md-6?
Мне нужно отобразить в центре div с 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="#" onclick="location.href='http://trendytheme.net/demo2/wp/nominee/onepage/event/election-campaign/'; return false;">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>
Ответы
Ответ 1
Bootstrap 3
Добавьте класс col-md-offset-3
который будет смещен на 3 столбца, учитывая, что Bootstrap имеет сетку из 12 столбцов, поэтому элемент col-md-6
будет помещен прямо в центр.
Справочная документация по смещению.
Bootstrap 4
Используйте offset-3
или mx-auto
для col-md-6
столбца col-md-6
Ответ 2
Как я вижу, вы используете wordpress. И код, который вы разместили, не заканчивается должным образом. Если я не ошибаюсь, есть и другая часть col-md-6, которая у вас есть в строке.
Так легко вы можете установить время в центре .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>
Ответ 3
Просто добавьте "float: none; margin: auto;" к вашему стилю div, как это:
<div class="col-lg-6" style="float:none;margin:auto;">
.....
</div>
Надеюсь быть полезным;)