1

Друзья, пример проблемы навел кодом в codepen

Мне необходимо разместить белую кнопку, которая справа по центру (по вертикали). Испробовал уже много классов из бутстрапа, кнопке назначал display: inline, всеравно разместить кнопку по центру не получается. В данный момент она размещена вверху по вертикали.

Обьясните пожалуйста в чем проблема?

Вот ссылка:

Codepen

<section class="conversion-screen">
    <div class="container">
        <div class="row">
            <div class="col-9 conversion-text">
                <h4>Бесплатный трансфер</h4>
                <p>Наш хостел осуществляет бесплатный трансфер от жд/автовокзала в случае гарантированного бронирования с сайта 
                    на сумму более 1000 руб, а также с аэропорта.  Стоимость гарантированного бронирования для трансфера с аэропорта 4000 руб.
                </p>
                <p class="lighten">Услуга беслплатного трансфера предоставляется при провозе багажа в багажнике легкового автомобиля.</p>
            </div>
            <div class="ml-auto col-2 text-right align-middle">
                <div class="action-button white-button">Бронировать</div>
            </div>
        </div>
    </div>
</section>

1 ответ 1

0

Обьясните пожалуйста в чем проблема? В этом <div class="row">

.conversion-screen {
  width: 100%;
  background: linear-gradient(103.15deg, #0584A6 0%, #3386C6 100%);
  padding: 16px 0px;
}

h4 {
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
}

p {
  font-size: 12px;
  color: #FFFFFF;
  line-height: 18px;
  margin: 0;
}

p.lighten {
  margin-top: 16px;
  opacity: 0.6;
}

.action-button {
  min-width: 136px;
  height: 32px;
  background: linear-gradient(103.15deg, #0584A6 0%, #3386C6 100%);
  flex: 0 0 auto;
  color: #000;
  line-height: 32px;
  padding: 0px 16px;
  font-weight: 300;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.5s ease;
  text-align: center;
}

.white-button {
  background: #fff;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="conversion-screen">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-9 conversion-text">
        <h4>Бесплатный трансфер</h4>
        <p>Наш хостел осуществляет бесплатный трансфер от жд/автовокзала в случае гарантированного бронирования с сайта на сумму более 1000 руб, а также с аэропорта. Стоимость гарантированного бронирования для трансфера с аэропорта 4000 руб.
        </p>
        <p class="lighten">Услуга беслплатного трансфера предоставляется при провозе багажа в багажнике легкового автомобиля.</p>
      </div>
      <div class="ml-auto col-2 text-right align-middle">
        <div class="action-button white-button">Бронировать</div>
      </div>
    </div>
  </div>
</section>

2
  • я просто применял класс align-middle. Спасибо за ответ!
    – WhoIsDT
    8 июл 2018 в 19:00
  • не за что, хорошего дня :)
    – user210322
    8 июл 2018 в 19:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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