<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <header> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 pdl0"> <div class="logo"> <img class="img-responsive" src="img/logo.png" alt=""> </div> </div> <div class="col-md-2 pdr0"> <i class="fa fa-phone fa-1x" aria-hidden="true"></i> <div class="consult"> <span>Консультация</span> <span class="number">(499) <b>322-41-23</b></span> </div> </div> <div class="col-md-2 col-sm-6"> <div class="zakazzvonka"> <div class="list-group"> <span class="list-group-item" href="#"><i class="fa fa-mobile fa-lw" aria-hidden="true"></i><a class="link" href="">Заказать звонок</a></span> <span class="list-group-item mail" href="#"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i>sale@polar18.ru</span> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div> <i class="fa fa-clock-o fa-1x" aria-hidden="true"></i> <div class="item"> <span class="regim">Режим работы:</span> <span class="time">Сб 09:<sup>00</sup> - 20:<sup>00</sup>, Вс 10:<sup>00</sup> - 18:<sup>00</sup></span> </div> </div> <div> <i class="fa fa-map-marker fa-1x" aria-hidden="true"></i> <div class="item"> <span class="adr">Москва, ул. Полярная д. 18</span> </div> </div> </div> <div class="col-md-2 col-sm-6 pdr0"> <div class="cart"> <i class="fa fa-shopping-basket fa-1x" aria-hidden="true"></i> <div class="item"> <span class="korzina"><a class="link" href="">Корзина</a></span> <span class="coltov">3 товара на 15600 руб</span> </div> </div> </div> </div> </div> </header>

I make up the bootstrap on the grid, it is necessary that each col-md-3 be vertically exactly in the center. How to do? screen

  • Each col-md-3 needs to be vertically evenly centered. - Alexander
  • Sasha and your screen is very different from the layout - user33274
  • I did not copy all the content. Added code completely. - Alexander
  • Now the one who sits on the bootstrap will help you, I write on pure css without frameworks - user33274

2 answers 2

Option 1

 @media (min-width: 768px) { .vertical-center { display: flex; align-items: center; } } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row vertical-center"> <div class="col-md-3"> контент </div> <div class="col-md-3"> контент контент контент контент контент </div> <div class="col-md-3"> контент контент контент контент контент контент контент контент контент </div> <div class="col-md-3"> контент контент контент контент </div> </div> </div>

Option 2

 .row{ font-size: 0; } .vertical-center { display: inline-block!important; vertical-align: middle!important; float: none!important; font-size: 15px; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-3 vertical-center"> контент </div> <div class="col-md-3 vertical-center"> контент контент контент контент контент </div> <div class="col-md-3 vertical-center"> контент контент контент контент контент контент контент контент контент </div> <div class="col-md-3 vertical-center"> контент контент контент контент </div> </div> </div>

    Never used bootstrap : I know what's off topic but just for example

     *{ margin:0; padding:0; text-decoration:none; list-style:none; font-size:18px; box-sizing:bordr-box; } menu{ width:100%; max-width:100%; background:yellow; overflow:hidden; } menu section{ width:100%; max-width:100%; } menu section.top div{ display:table-cell; width:1000px; height:100px; background:#DEDEDE; border-right:1px solid #fff; box-sizing:border-box; position:relative; } .num ul,.phone ul,.sale ul{ display:block; width:100%; height:40px; background:; position:absolute; top:50%; margin-top:-25px; margin-left:25%; } .graf ul{ display:block; width:100%; height:40px; background:; position:absolute; top:50%; margin-top:-30px; margin-left:25%; } menu section.bottom{ background:#fff; } menu section.bottom .menu{ display:table; width:65%; background:#fff; } menu section.bottom ul{ display:table-row; } menu section.bottom li{ display:table-cell; vertical-align:bottom; } menu section.bottom li a{ display:table-cell; width:1000px; height:50px; text-align:center; vertical-align:middle; } section.bottom .myFunction{ float:right; width:25%; height:50px; background:#fff; line-height:50px; margin-top:-50px; text-align:center; } 
     <menu> <section class="top"> <div class="num"> <ul> <li>Консультация</li> <li>+7 908 320 00 00 </li> </ul> </div> <div class="phone"> <ul> <li>Заказать звонок</li> <li>sale@test.ru</li> </ul> </div> <div class="graf"> <ul> <li>Заказать звонок</li> <li>sale@test.ru</li> <li>sale@test.ru</li> </ul> </div> <div class="sale"> <ul> <li>Заказать звонок</li> <li>sale@test.ru</li> </ul> </div> </section> <section class="bottom"> <div class="menu"> <ul> <li><a href="">Главная</a></li> <li><a href="">О магазине</a></li> <li><a href="">Статьи</a></li> <li><a href="">Контакты</a></li> </ul> </div> <p class="myFunction"><a href="">Мой кабинет</a></p> </section> </menu>