Отцентрировать текст на изображении

347

15 ноября 2017, 00:04

Привет. Не могу понять как сделать так, чтобы поверх изображения отцентрировать текст относительно самого изображения, чтобы при ресайзе окна, текст всё так же оставался по-центру изображения.

Делал так:

задавал изображение как background: cover, и div с текстом центрировал через margin: 0 auto. Это работает, но сам фон в итоге при ресайзе снизу обрезается.

а если просто изображение использовать через img, а тексту сделать position: absolute, то работает, но как тогда текст сделать по-центру?

Answer 1

Например:

Вариант 1.

Код HTML

<div class="block_flex">    
   <div class="block_flex--image">
        <img src="url image" alt=""> 
        <p>Текст</p>
   </div> 
</div>

Код CSS

.block_flex {
    display: flex;
    align-items: center;
}
.block_flex--image {
    position: relative;
}
.block_flex p {
    font-size: 4em;    
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    color: white;
}

Вариант 2

Код HTML:

  <div class="block_flex">  
    <div class="block_flex--image">
      <p>Текст</p>
    </div> 
  </div>

Код CSS:

.block_flex--image {
    width: 100%;
    height: 377px;
    max-width: 483px;
    background: url(image url)no-repeat;
    background-position: center;
    background-size: 100%;
    display: flex;
    align-items: center;
    align-self: center;
    align-content: center;
    justify-content: center; 
} 
.block_flex p {
    font-size: 4em;    
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

Получилось: