Вертикальное выравнивание в Bootstrap

Статус
Закрыто для дальнейших ответов.

mediol

New Member
Регистрация
23.03.2017
Сообщения
5
Здравствуйте! Помогите с вертикальным выравниванием в блоке. Суть такая: на первом экране лендинга есть заголовок, подзаголовок, форма обратной связи и три картинки дверей, расположены каскадно, то есть наложены друг на друга слоями. Заголовок, подзаголовок и форму я заключил в .col-md-8, а три картинки дверей расположил используя атрибут z-index и position: absolute; заключил эти картинки в .col-md-4, то есть отвел для первой части 2/3 ширины сайта, а для второй - 1/3. Задача: выровнять в первой части заголовок, подзаголовок и "инлайн" форму по центру относительно верха и низа контейнера.

Вот мой код:

Код:
<body>
    <section id="header">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-8">
            <h1>хотите купить двери в Светлогорске?</h1>
            <p>От самых крупных поставщиков Беларуси</p>
            <div class="section-form">
              <form class="form-inline">
                <div class="form-group">
                  <label class="sr-only" for="exampleInputEmail3">Ваше имя</label>
                  <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                </div>
                <div class="form-group">
                  <label class="sr-only" for="exampleInputPassword3">Ваш телефон</label>
                  <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-default">Sign in</button>
              </form>
            </div>
          </div>
          <div class="col-md-4">
            <p class="doors">
              <img id="layer1" src="img/door1.png" alt="двери" class="one">
              <img id="layer2" src="img/door2.png" alt="двери" class="two">
              <img id="layer3" src="img/door3.png" alt="двери" class="three">
            </p>
          </div>
        </div>
      </div>
    </section>
  </body>
 

tonn

New Member
Регистрация
27.02.2017
Сообщения
7
Самый простой вариант - добавить к левому диву-обертке класс с padding-top:50%; если совсем ровно по вертикали, подберите процентовку поточнее
 

mediol

New Member
Регистрация
23.03.2017
Сообщения
5
tonn сказал(а):
Самый простой вариант - добавить к левому диву-обертке класс с padding-top:50%; если совсем ровно по вертикали, подберите процентовку поточнее
Похоже, это действительно самый простой вариант. Спасибо! Посмотрим как этот див будет адаптивиться.
 

Volly

Well-Known Member
Регистрация
21.03.2012
Сообщения
831
mediol, попробуйте добавить правила
Код:
.row {display: flex;}
.col-md-8 {display: flex; align-items: center;}
 
Статус
Закрыто для дальнейших ответов.
Верх Низ