Вертикальное выравнивание по центру bootstrap 4

161

26 августа 2018, 06:10

Друзья, пример проблемы навел кодом в 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>

Answer 1

Обьясните пожалуйста в чем проблема? В этом <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>