Text centered next to the image header

Проблема и её описание

На сайте Capitol 52 Foundation возникла проблема с расположением элементов в шапке. Визуально, изображение отображается слева, а текст под ним. Однако требуется изменить расположение так, чтобы текст располагался справа от изображения и центрировался на странице.

Анализ и решение проблемы

Для решения данной проблемы необходимо изменить структуру HTML-кода и добавить необходимые CSS-стили для корректного центрирования и размещения элементов.

Изменение HTML-кода

Сначала необходимо изменить HTML-код для правильного расположения изображения и текста. Мы можем использовать `` с классом для создания двух колонок: одна для изображения, другая для текста.

<header class="site-header">
    <div class="header-container m-4">
        <div class="image-text-container">
            <img src="https://api.andrey-dev.online/wp-content/uploads/2026/09/img-9c7954be-1788581424.jpg" alt="Logo" width="140" height="200" class="header-logo" />
            <div class="text-container">
                <h1>Capitol 52 Foundation</h1>
                <p>P.O. Box 75421 Vienna, VA 23236</p>
            </div>
        </div>
    </div>
</header>

Добавление CSS-стилей

Для того чтобы текст был справа от изображения и центрирован на странице, нужно добавить соответствующие стили CSS.

.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-text-container {
    display: flex;
    align-items: center;
}

.header-logo {
    margin-right: 20px; /* Отступ между изображением и текстом */
}

.text-container {
    text-align: right;
}

Практические советы

1. Использование Flexbox: Flexbox является мощным инструментом для управления размещением и выравниванием элементов внутри контейнера.
2. Отступы между элементами: Используйте margin для создания пространства между изображением и текстом.
3. Центрирование: Убедитесь, что контейнеры используют свойство justify-content: center, чтобы элементы были центрированы по горизонтали.

Заключение

Теперь элементы в шапке сайта правильно расположены и центрированы. Изображение отображается слева, а текст справа от него, что значительно улучшает внешний вид и удобство восприятия информации.

SEO метаданные