2

<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>[email protected]</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>

Верстаю по сетке бутстрап, нужно чтобы каждый col-md-3 был вертикально ровно по центру. Как сделать? скрин

4
  • Нужно чтобы каждый col-md-3 был вертикально ровно по центру. 10 авг 2016 в 6:03
  • Саша а ваш скрин очень сильно отличается от вёрстки
    – user33274
    10 авг 2016 в 6:08
  • Я не стал копировать весь контент. Добавил код полностью. 10 авг 2016 в 6:09
  • вот теперя тот кто сидит на бутстрап помогут вам, я пишу на чистом css без фремворков
    – user33274
    10 авг 2016 в 6:11

2 ответа 2

1

Вариант 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>

Вариант 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>

0

Ни когда не пользовался бутстрап : знаю что не по теме но просто для примера

*{
  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>[email protected]</li>     
      </ul>
    </div>
    <div class="graf">
      <ul> 
        <li>Заказать звонок</li>
        <li>[email protected]</li> 
         <li>[email protected]</li> 
      </ul>    
    </div>
    <div class="sale">
      <ul> 
        <li>Заказать звонок</li>
        <li>[email protected]</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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.