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>