Как сделать чтобы текст был по середине блока

Question

Хочу чтобы текст был по середине блока,как на фото

.features__block {
  height: 830px;
}

.description {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 600px;
  width: 1170px;
  margin-top: 70px;
}

.features__tasks {
  width: 400px;
  height: 547px;
  background-color: #f1f1f1;
  align-items: center;
  position: absolute;
  margin-left: 680px;
  margin-top: 115px;
  padding: 0 15px;
}

.features__title {
  font-weight: 500;
  font-size: 36px;
  color: #000;
}

.features__text {
  height: 280px;
}

<section class="features">
  <div class="features__block">
    <div class="container">
      <div class="description" style="background-image: url(Images/стройка.jpg)">
        <div class="features__tasks">
          <h2 class="features__title">НАШИ ЗАДАЧИ</h2>
          <p class="features__text">
            Основное направление компании: строительство и реконструкция офисных зданий и сооружений любой сложности, капитальный ремонт зданий, строительство коттеджей, строительство домов, строительство магазинов, ремонт офисов, строительство мансард.
          </p>
          <a href="#" class="features__link">Узнать подробнее</a>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

Мы уберем для .features__text высоту, затем для .features__tasks мы уберем align-items и добавим display: flex; flex-direction: column;. А для .features__link мы добавим margin: auto 0, что позволит нам сделать сверху и снизу автоматический отступ.

.features__block {
  height: 830px;
}

.description {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 600px;
  width: 1170px;
  margin-top: 70px;
}

.features__tasks {
  width: 400px;
  height: 547px;
  background-color: #f1f1f1;
  /* align-items: center; */
  position: absolute;
  margin-left: 680px;
  margin-top: 115px;
  padding: 0 15px;
  
  /* added */
  display: flex;
  flex-direction: column;
}

.features__title {
  font-weight: 500;
  font-size: 36px;
  color: #000;
}

.features__text {
  /* height: 280px; */
}

/* Added */
.features__link
{
  margin: auto 0;
}

<section class="features">
  <div class="features__block">
    <div class="container">
      <div class="description" style="background-image: url(Images/стройка.jpg)">
        <div class="features__tasks">
          <h2 class="features__title">НАШИ ЗАДАЧИ</h2>
          <p class="features__text">
            Основное направление компании: строительство и реконструкция офисных зданий и сооружений любой сложности, капитальный ремонт зданий, строительство коттеджей, строительство домов, строительство магазинов, ремонт офисов, строительство мансард.
          </p>
          <a href="#" class="features__link">Узнать подробнее</a>
        </div>
      </div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Как сделать чтобы текст был по середине блока

Ответы (1 шт):