Как разместить две картинки и добавить под каждой из них текст в центре страницы?

Question

AuroraShadow

css , html

Как разместить две картинки и добавить под каждой из них текст в центре страницы?

Как можно оформить элементы веб-страницы, чтобы создать пространство вокруг содержимого?

23 марта 2024 г. 7:39

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

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

Answer 1

Для размещения двух картинок и текста под каждой из них на центральной части страницы, вы можете использовать следующий HTML и CSS код:

HTML:
```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="image-container">
            <img src="image1.jpg" alt="Image 1">
            <p>Text for Image 1</p>
        </div>
        <div class="image-container">
            <img src="image2.jpg" alt="Image 2">
            <p>Text for Image 2</p>
        </div>
    </div>
</body>
</html>
```

CSS (styles.css):
```css
.container {
    display: flex;
    justify-content: center;
}

.image-container {
    text-align: center;
    margin: 20px;
}

img {
    width: 200px;
    height: 200px;
}

p {
    font-size: 18px;
    margin-top: 10px;
}
```

Чтобы создать пространство вокруг содержимого на веб-странице, вы можете использовать внешние отступы (margin) или внутренние отступы (padding) для элементов или контейнеров. Например, добавив свойство `margin` или `padding` к контейнеру или элементам в CSS, можно создать пространство вокруг содержимого. 

Пример использования внешних отступов для контейнера:
```css
.container {
    margin: 20px;
}
```

Пример использования внутренних отступов для элемента:
```css
.image-container {
    padding: 10px;
}
```

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