Как выровнять текст, расположенный под картинкой, по центру?

Question

Фарид

css , html

Как выровнять текст, расположенный под картинкой, по центру?

Как выровнять изображение по центру под текстом и расположить его с обеих сторон текста (слева и справа)? Пожалуйста, приведите пример. Спасибо! <br/>

21 сентября 2024 г. 10:03

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для выравнивания текста под картинкой по центру можно использовать HTML и CSS. Вот пример кода, который демонстрирует, как выравнивать текст под изображением:

### Пример 1: Выровнять текст по центру под картинкой

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .centered {
            text-align: center;
        }
    </style>
    <title>Выровнять текст по центру</title>
</head>
<body>

<div class="centered">
    <img src="https://via.placeholder.com/150" alt="Картинка">
    <p>Этот текст выровнен по центру под картинкой.</p>
</div>

</body>
</html>
```

### Пример 2: Изображение с обеих сторон текста

Для того чтобы расположить изображение слева и справа от текста, можно использовать CSS Flexbox или CSS Grid. Вот пример с использованием Flexbox:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .flex-container {
            display: flex;
            align-items: center; /* Центрирует по вертикали */
            justify-content: center; /* Центрирует по горизонтали */
        }
        .flex-container img {
            margin: 0 10px; /* Отступы между изображениями и текстом */
        }
        .flex-container p {
            margin: 0; /* Убираем отступы у текста */
        }
    </style>
    <title>Изображение с текстом</title>
</head>
<body>

<div class="flex-container">
    <img src="https://via.placeholder.com/150" alt="Картинка слева">
    <p>Этот текст расположен между двумя изображениями.</p>
    <img src="https://via.placeholder.com/150" alt="Картинка справа">
</div>

</body>
</html>
```

### Объяснение:

1. **В первом примере** текст выравнивается по центру под изображением с помощью `text-align: center;`.
  
2. **Во втором примере** используется Flexbox, где `display: flex;` позволяет располагать элементы в одну строку, а свойства `align-items` и `justify-content` помогают выровнять их по центру как вертикально, так и horizontally.

Вы можете изменить размеры и ссылки на изображения по своему усмотрению.

Answer 2

<div class="b-img">
  <div>подпись</div>
  <img src="">
</div>
 
 
 .b-img {
  text-align: center;
}