Как отцентрировать div внутри div и разместить текст по центру?

Question

Есть div в котором лежит картинка , и внутри еще в котором должен располагаться текст. Подскажите как в css расположить чтобы было как на картинке?

<div class="content_img_div">
        <img class="content_img_circle" src="/img/page/vl0435.png">
        <div>
            <p class="content_img_p">Спецтехника</p>
        </div>
    </div>

Answer 1

Можно, например, картинку добавить как фон блока, а текст отцентрировать через флексы:

.content_img_div {
  background-image: url(https://thumbs.dfs.ivi.ru/storage32/contents/2/3/eaa31c6ccf28bdc0c52751e7f04be5.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  width: 500px;
  height: 500px;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.content_img_p {
  margin: 0;
  padding: 3em 1em;
  width: 100%;
  box-sizing: border-box;
  
  background-color: rgba(0, 0, 0, .5);
  
  font-size: 24px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .2em;
  text-align: center;
}

<div class="content_img_div">
  <p class="content_img_p">
    Спецтехника
  </p>
</div>

БЛОГ НА HUSL

Как отцентрировать div внутри div и разместить текст по центру?

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