Как сделать текст поверх картинки?

Question

[act799]

Помогите отредактировать background-color в css.
Проблема в том, что редактирую top:50px; чтобы текст был ниже, по середине, но в месте с текстом опускается и background-color фон, как зафиксировать background-color чтобы он не опускался?

.example2 {
    display:inline-block;  
    position:relative;
 
}
.example2 span {
 display:inline-block;
 position:absolute;
 top:50px; 
 left:0px;
     
 /* Оформление текста */
 color:#FFF;
 font-family:Arial, Helvetica, sans-serif;
 font-size:50px;
 text-align: center;
     
 /* Фон */
 background-color:rgba(0,0,0,.2);
 padding:10px 30px;
 width:100%;
 height:100%;
}

Answer 1

[Ankhena]

Например, флексами https://jsfiddle.net/ak94zpb0/

display: flex;
  align-items: center;
  justify-content: center;

Comments

[act799]

Я не совсем понимаю, что на что нужно заменить ?

[Yupiter7575]

act799, это потому что вы не знаете что такое флексы

[Ankhena]

act799, ваш код на мой из песочницы

[act799]

Ankhena, Разобрался. Спасибо!

[Ankhena]

Fructus, человек-новичок, разберется - отметит. Решит, что это лишнее - улетит в чс, делов-то ))