Проблема с позиционированием текста по середине фонового изображения

Question

Проблема с позиционированием текста по середине фонового изображения

vato 1 Мастер (1452), на голосовании 1 год назад

Я только начал изучение верстки и всего , что с ней связанно , был бы рад помощи , планирую делать адаптив страницы под разные устройства.надо расположить текст по середине изображения (с помощью position:relative; и position: absolute;добился желаемого , но адаптивную верстку потом невозможно делать)

Answer 1

У тебя твой задний фон находится как бы в контейнере в виде блока если ты хочешь сделать текст по центру картинки , то можно так ну это если я правильно тебя понял. Так же для верстки ты можешь использовать display и justify-content , а потом к этому всему через @media и размеры задавать классам или блокам всякие размеры и тд.

 .image{ 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    background-image: url('https://i.pinimg.com/originals/8a/a7/83/8aa7831e22f8d5c74aecfe0c0e6953e3.jpg'); 
} 
.text{ 
    color: RED; 
}

Answer 2

Самый простой вариант - делаем div на 100% (или меньше, но с позиционированием left\right:auto)
В этом div'е пишем текст. Возвращаемся в свойства div'а и туда прописываем text-align:center
-----
Это основа. А если серьёзнее разбираться, то взять простой шаблон BootStrap и разобрать его по коду, что за что всё отвечает.