Люди, кто шарит в CSS html?

Question

Люди, кто шарит в CSS html?

Коля Доронин Ученик (95), на голосовании 9 месяцев назад

Нужно выровнять картинку по центру (не подбирать margin-ами!), и наложить текст на эту картинкую. Одновременно. На сайте есть background, который не является этой самой картинкой.
Я знаю, что можно накинуть на div position:relative, на картинку position:absolute, на текст position:relative, но тогда картинка будет не по центру (пытался сделать margin: 0px auto 0px auto, но тогда текст "уезжает" под картинку

Answer 1

qwery tt Мудрец (10749) 10 месяцев назад

Как и всегда flex box в помощь

Коля ДоронинУченик (95) 10 месяцев назад

Не знаю такого пока, только изучаю html. Куда flex box впихивать? В смысле, на какой элемент? div, в котором находится картинка и текст, или <img>, или <p>, где сам текст

qwery tt Мудрец (10749) Коля Доронин, изучай, куча гайдов. Это то что решает все проблемы с позиционирование объектов на сайте, то есть нужно всегда, поэтому стоит изучить

Answer 2

Размести картинку в контейнере, а на содержимое контейнера уже применяй выравнивание

Answer 3

Использовать FlexBox либо центрировать при помощи background-position

Answer 4

Степан Абрамович Профи (864) 10 месяцев назад

Ты не указал по какому центру: по вертикали, или горизонтали, или и так и так.

Коля ДоронинУченик (95) 10 месяцев назад

По горизонтали, типа картинка сверху страницы, но по центру относительно левого и правого края страницы

Степан Абрамович Профи (864) Коля Доронин, text-align: center применять к контейнеру, который содержит эту картинку, а контейнер занимает всю ширину, это и body может быть

Answer 5

Ох уж эти проблемы с выравниванием...

 position: absolute;
top: 50%;
left: 50%;
transfrom: translate(-50%, -50%);

Вот один из интересных вариантов. В обычном сайте такое лучше не использовать, хотя все зависит от ситуации...

А так можно создать контейнер, в него вставить картинку и текст. Текст спозиционировать абсолютно от контейнера

Answer 6

Жилет безопасности для кур Оракул (56592) 10 месяцев назад

<center>тег картинки</center>

Answer 7

Сделал пример такого центрирования.
https://codepen.io/ieqlvlox-the-typescripter/pen/ZEPeyKV