Как сделать текст под картинкой в css

Существует несколько способов поместить текст под картинкой в CSS. Рассмотрим два наиболее распространенных:

1. Используя тег <figure> и тег <figcaption>

HTML:

<figure>
   <img src="path/to/image.jpg" alt="image">
   <figcaption>Caption text goes here</figcaption>
</figure>

CSS:

figure {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
}

figcaption {
   margin-top: 10px;
}

В данном примере мы оборачиваем изображение и текст в тег <figure>. Затем мы используем свойство display: flex, чтобы установить направление контейнера на column и поместить картинку сначала, а затем текст под ней. Мы также используем justify-content: center и align-items: center для выравнивания содержимого по центру и text-align: center для центрирования текста.

Чтобы создать пространство между изображением и текстом, мы задаем верхнее отступ (margin-top) для <figcaption>.

2. Используя position и margin

HTML:

<div class="image-with-text-container">
   <img src="path/to/image.jpg" alt="image">
   <div class="text">
      <p>Caption text goes here</p>
   </div>
</div>

CSS:

.image-with-text-container {
   position: relative;
   display: inline-block;
}

.text {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   margin: 0;
   background-color: rgba(255, 255, 255, 0.7);
   padding: 10px;
   text-align: center;
}

В данном примере мы также используем контейнер (<div>), в котором размещаем изображение и текст. С помощью свойства position: relative мы устанавливаем базовую позицию для контейнера, а затем используем position: absolute для контейнера с текстом (<div class="text">).

bottom: 0 и left: 0 определяют позицию текста относительно контейнера с изображением, а width: 100% устанавливает ширину текста, равную ширине контейнера. Мы также добавляем небольшой отступ и центрируем текст с помощью text-align: center. Чтобы сделать текст более читабельным на фоне изображения, мы также добавляем прозрачный белый фон с помощью background-color и opacity.

Оба этих способа можно использовать в зависимости от конкретного случая и требований дизайна.