Перейти к содержимому

Фотография
- - - - -

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


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 3

#1 mediol

mediol

    Прохожий

    Топикстартер
  • Участник
  • 0
    5 сообщ.

Отправлено 28 Март 2017 в 22:05

Здравствуйте! Помогите с вертикальным выравниванием в блоке. Суть такая: на первом экране лендинга есть заголовок, подзаголовок, форма обратной связи и три картинки дверей, расположены каскадно, то есть наложены друг на друга слоями. Заголовок, подзаголовок и форму я заключил в .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>

 


  • 0

Спонсор

#2 tonn

tonn

    Прохожий

  • Участник
  • 3
    7 сообщ.

Отправлено 29 Март 2017 в 03:02

Самый простой вариант - добавить к левому диву-обертке класс с padding-top:50%; если совсем ровно по вертикали, подберите процентовку поточнее


  • 1

#3 mediol

mediol

    Прохожий

    Топикстартер
  • Участник
  • 0
    5 сообщ.

Отправлено 29 Март 2017 в 06:48

Самый простой вариант - добавить к левому диву-обертке класс с padding-top:50%; если совсем ровно по вертикали, подберите процентовку поточнее

Похоже, это действительно самый простой вариант. Спасибо! Посмотрим как этот див будет адаптивиться.


  • 0

#4 Volly

Volly

    Увлеченный

  • Участник
  • 110
    528 сообщ.

Отправлено 29 Март 2017 в 11:37

mediol, попробуйте добавить правила

.row {display: flex;}
.col-md-8 {display: flex; align-items: center;}

Сообщение отредактировал Volly: 29 Март 2017 в 11:37

  • 1



Похожие темы Свернуть

  Название темы Форум Автор Статистика Последнее сообщение
Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей