Центрирование изображения с помощью сетки ⇐ CSS

[Anonymous]

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

Код моего проекта можно найти на GitHub.

Изначально я внес следующие изменения:
[*]Я добавил height: 100vh; в класс .grid, чтобы он занимал всю высоту области просмотра. [*]Применен text-align: center; к .grid div для централизованного содержания внутри каждого элемента сетки. [*]Добавлены max-width: 100%; и max-height: 100%; в #plattegrond, чтобы изображение не выходило за пределы контейнера. размеры.
Несмотря на то, что я ожидал, что изображение будет центрировано по горизонтали посередине страницы, результат оказался неожиданным. Изображение стало меньше не по моей воле, но все же центрировалось по горизонтали. Однако он упорно оставался в левой части сайта и не мог центрироваться по вертикали в середине страницы.

Пытаясь найти решение, я внес дополнительные изменения:
[*]Я рассмотрел возможность изменения свойства display класса .grid на flex для упрощения центрирования дочерних элементов. [*]Задайте justify-content: center; и align-items: center;, чтобы добиться центрирования как по горизонтали, так и по вертикали. [*]Изменены свойства ширины и высоты для #plattegrond, чтобы заполнить контейнер, сохранив исходное соотношение сторон.
К сожалению, результат оказался не таким, как ожидалось. Изображение центрировалось, но стало слишком большим, что вызвало проблемы с другими страницами, связанными с той же таблицей стилей. Это создало неожиданную проблему в обеспечении единообразия размеров всего сайта.

Для этой задачи я обратился за помощью к ChatGPT.
.grid { дисплей: сетка; столбцы-шаблона сетки: повторение (3, 1fr); оправдание-содержание: центр; выровнять-элементы: по центру; цвет фона: #4883BD; высота: 100вх; /* Устанавливаем высоту, чтобы заполнить высоту области просмотра */ } .grid div { выравнивание текста: по центру; /* Центрируем содержимое внутри каждого элемента сетки */ } #платтегронд { максимальная ширина: 100%; /* Убедитесь, что изображение не превышает ширину контейнера */ максимальная высота: 100%; /* Убедитесь, что изображение не превышает высоту контейнера */ } .grid { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; высота: 100вх; цвет фона: #4883BD; } #платтегронд { ширина: 100%; /* Устанавливаем ширину 100%, чтобы заполнить контейнер */ высота: авто; /* Сохраняем соотношение сторон при настройке ширины */ максимальная ширина: нет; /* Разрешить изображению принять исходную ширину */ максимальная высота: нет; /* Разрешить изображению принять исходную высоту */ }