1

Как сделать, чтобы кнопка purchase-block__btn была посередине элементов, которые находятся в блоке purchase-block__text.

.purchase {
  background-color: #f4f5f8;
  background-image: linear-gradient(to right, #211b19 0%, #4e3427 100%);
}

.purchase-block {
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
}

.purchase-block__title {
  display: block;
  text-align: center;
  margin-top: 48px;
  font-size: 28px;
  color: #c7b299;
  font-family: Raleway-Regular;
}

.purchase-block__subtitle {
  display: block;
  text-align: center;
  font-size: 18px;
  margin-top: 8px;
  margin-bottom: 49px;
  color: #615855;
  font-family: Montserrat-Light;
}
<section class="purchase">
  <div class="wrapper">
    <div class="purchase-block">
      <div class="purchase-block__text">
        <span class="purchase-block__title">Waxom Multipurpose WordPress Theme</span>
        <span class="purchase-block__subtitle">Don't Forget to Rate the Template. Thanks so much!</span>
      </div>
      <div class="purchase-block__btn">
        <a href="#" class="btn">purchase</a>
      </div>
    </div>
  </div>
</section>

введите сюда описание изображения

2 ответа 2

2

У Вас же элементы в блоке purchase-block располагаются вертикально, так и укажите это флексу - flex-direction: column;

* {
    padding: 0;
    margin: 0;
}
.purchase {
    background-color: #f4f5f8;
    background-image: linear-gradient(to right, #211b19 0%, #4e3427 100%);
}

.purchase-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.purchase-block__title {
    display: block;
    text-align: center;
    margin-top: 48px;
    font-size: 28px;
    color: #c7b299;
    font-family: Raleway-Regular;
}

.purchase-block__subtitle {
    display: block;
    text-align: center;
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 49px;
    color: #615855;
    font-family: Montserrat-Light;
}
.purchase-block__btn {
  margin-bottom: 70px;
}
.purchase-block__btn .btn {
  color: #c7b299;
}
<section class="purchase">
    <div class="wrapper">
        <div class="purchase-block">
            <div class="purchase-block__text">
                <span class="purchase-block__title">Waxom Multipurpose WordPress Theme</span>
                <span class="purchase-block__subtitle">Don't Forget to Rate the Template. Thanks so much!</span>
            </div>
            <div class="purchase-block__btn">
                <a href="#" class="btn">purchase</a>
            </div>
        </div>
    </div>
</section>

2

Если это вариант то я применил нижнее выравнивание align-items: flex-end; и margin-bottom: 30px; padding:0 30px; для кнопки

.purchase {
  background-color: #f4f5f8;
  background-image: linear-gradient(to right, #211b19 0%, #4e3427 100%);
}

.purchase-block {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.purchase-block__title {
  display: block;
  text-align: center;
  margin-top: 48px;
  font-size: 28px;
  color: #c7b299;
  font-family: Raleway-Regular;
}

.purchase-block__subtitle {
  display: block;
  text-align: center;
  font-size: 18px;
  margin-top: 8px;
  margin-bottom: 49px;
  color: #615855;
  font-family: Montserrat-Light;
}

.purchase-block__btn {
  margin-bottom: 30px;
  padding: 0 30px;
}

.purchase-block__btn .btn {
  color: #c7b299;
}
<section class="purchase">
  <div class="wrapper">
    <div class="purchase-block">
      <div class="purchase-block__text">
        <span class="purchase-block__title">Waxom Multipurpose WordPress Theme</span>
        <span class="purchase-block__subtitle">Don't Forget to Rate the Template. Thanks so much!</span>
      </div>
      <div class="purchase-block__btn">
        <a href="#" class="btn">purchase</a>
      </div>
    </div>
  </div>
</section>

4
  • Моя ошибка, ещё не так дописал, чтобы горизонтально кнопка отображалось, ну то есть они были по краям кнопка и текст и кнопка была по середине горизонтально,
    – Олег
    17 апр 2018 в 6:21
  • добавил скрин, сейчас так выглядит, надо чтоб кнопка посередине горизонтально была
    – Олег
    17 апр 2018 в 6:26
  • по ответу выше они становится по середине вертикально
    – Олег
    17 апр 2018 в 6:28
  • 1
    @Олег изменил ответ
    – user33274
    17 апр 2018 в 6:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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