CSS make element center of row

Question

Я пытаюсь сделать некоторые элементы в центре div. Я использовал следующие CSS кода для мобильного устройства с максимальной шириной 320px -

@media only screen and (min-width: 0px) and (max-width: 320px){ 
 
    .header .shopping-cart{ 
 
     padding: 15px 0 0 0; 
 
     float: left; 
 
    } 
 

 
    .header .contact{ 
 
     padding: 10px 0 0 0; 
 
    } 
 

 
    .header .contact span{ 
 
     text-align: center; 
 
    } 
 

 
    .header .search{ 
 
     padding: 10px 0 0 0; 
 
     max-width: 200px; 
 
    } 
 
}

<div class="header"> 
 
      <div class="row"> 
 

 
       <div class="col-md-4 col-sm-4"> 
 
        <div class="contact"> 
 
         <span> 
 
          <i class="fa fa-phone red"></i> 
 
          999-999-9999 
 
         </span> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4 col-sm-4"> 
 
        <div class="search"> 
 
         <form role="form" class="form"> 
 
          <div class="input-group"> 
 
           <input type="text" placeholder="Search..." class="form-control"> 
 
           <span class="input-group-btn"> 
 
            <button type="button" class="btn btn-default"><i class="fa fa-search"></i></button> 
 
           </span> 
 
          </div> 
 
         </form> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4 col-sm-4"> 
 
        <div class="shopping-cart"> 
 
         <a href="#" class="cart-link"> 
 
          <!-- Image --> 
 
          <img alt="" src="img/cart.png" class="img-responsive"> 
 
          <!-- Heading --> 
 
          <h4>Shopping Cart</h4> 
 
          <span>3 items $489/-</span> 
 

 
          <div class="clearfix"></div> 
 
         </a> 
 
         
 
       </div> 
 
      </div> 
 
      
 
     </div>

Это показывает следующий вывод -

Теперь я хочу, чтобы сделать эти элементы в середину каждого столбца ,

Заранее спасибо.

Answer 1

Вы можете использовать Flexbox для этого:

скрипку: https://jsfiddle.net/12o1Luk4/

@media only screen and (min-width: 0px) and (max-width: 320px) { 
    .row 
    { 
     display:flex; 
     flex-direction:column; 
     align-items:center; 
    } 

    .header .shopping-cart { 
     padding: 15px 0 0 0; 
     float: left; 
    } 
    .header .contact { 
     padding: 10px 0 0 0; 
    } 
    .header .contact span { 
     text-align: center; 
    } 
    .header .search { 
     padding: 10px 0 0 0; 
     max-width: 200px; 
    } 
}