I need to display in the center the div with 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>

Eldelshell

6,039 7 gold badges 39 silver badges 61 bronze badges

asked Oct 12 '16 at 15:13

4

  • Are you using Bootstrap?

    Oct 12 '16 at 15:14

  • Declare a css class like, .col-aligncenter{float: none;margin: 0 auto;} and place the .col-aligncenter after your col-md-6

    Oct 12 '16 at 15:16

  • @KnowGe the accepted answer there is bad practice and wrong.

    Oct 12 '16 at 15:25

3 Answers 3

Bootstrap 3

Add the col-md-offset-3 class that will offset by 3 columns, given that Bootstrap has a 12-column grid this will put a col-md-6 element right in the center.

Documentation reference on offsets.

Bootstrap 4

Use offset-3 or mx-auto to center a col-md-6 column

Zim

318k 80 gold badges 651 silver badges 586 bronze badges

answered Oct 12 '16 at 15:23

Just add "float:none;margin:auto;" to your div style like this :

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

Hope to be useful ;)

answered May 3 '19 at 15:24

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. 

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

answered Oct 12 '16 at 17:07

Not the answer you're looking for? Browse other questions tagged css twitter-bootstrap or ask your own question.