Возникли проблемы с центрированием текста с идентификатором «locations». Он расположен в классе «locationbox». ⇐ CSS

[Anonymous]

У меня возникли проблемы с центрированием Местоположений
.
Я пытаюсь воспроизвести эту веб-страницу. введите сюда описание изображения
Вот HTML-код, который у меня есть: Проект «Чайный уют» Миссия [*]Рекомендуемый чай [*]Местоположения Наша миссия Собранный вручную, вручную выращенный, на свободном выгуле, устойчивый, небольшими партиями, по справедливой торговле, органический чай Чай месяца Что такого в The Tea Cozy?


Чай «Осенние ягоды»



Чай с ромом и пряностями



Сезонные пончики



Чай Myrtle Ave



Бедфордский необычный чай

Местоположения
Центр города 384 Западная 4-я улица
Люкс 108
Портленд, Мэн
Ист-Бэйсайд Проспект Фишермана, 3433
(Северо-западный угол)
Портленд, Мэн
Оукдейл
515 Кресент Авеню
Второй этаж
Портленд, Мэн
Чайный уют contact@theteacozy.com
917-555-8904
авторские права The Tea Cosy, 2017
Вот код CSS, который у меня есть: /* РАЗДЕЛ НАВИГАЦИИ */ ли { дисплей: встроенный; оформление текста: подчеркивание; } /* РАЗДЕЛ МИССИИ */ .миссия { дисплей: гибкий; фоновое изображение: URL('/images/6Background.webp'); высота: 700 пикселей; ширина: 1200 пикселей; border-bottom: сплошная морская ракушка толщиной 1 пиксель; } .заявление { цвет фона: черный; высота: 100 пикселей; ширина: 1200 пикселей; маржа сверху: 250 пикселей; цвет: ракушка; семейство шрифтов: Helvetica; выравнивание текста: по центру; } /* ЧАЙНЫЙ РАЗДЕЛ*/ .teaintro { выравнивание текста: по центру; } .чаймесяца1, .teaofthemonth2 { дисплей: гибкий; гибкое направление: строка; /* Располагаем элементы в ряд */ оправдание-содержание: центр; /* Центрировать элементы по горизонтали */ выровнять-элементы: по центру; /* Центрировать элементы по вертикали */ } .image-контейнер { поле: 20 пикселей; } /* РАЗДЕЛ РАСПОЛОЖЕНИЯ*/ .locationbox { дисплей: гибкий; фоновое изображение: URL('images/5Locations.webp'); размер фона: содержать; } .locationbox #locations { дисплей: гибкий; гибкое направление: строка; /* Располагаем элементы в ряд */ оправдание-содержание: центр; /* Центрировать элементы по горизонтали */ выровнять-элементы: по центру; /* Центрировать элементы по вертикали */ } .lcnbox { семейство шрифтов: Helvetica; выравнивание текста: по центру; поле: 100 пикселей 40 пикселей; цвет: ракушка; ширина: 300 пикселей; высота: 300 пикселей; цвет фона: черный; высота строки: 3,0; } /*ЧАЙНЫЙ УЮТ КОНТАКТНАЯ ИНФОРМАЦИЯ*/ .чайный { поле слева: 500 пикселей; дисплей: блок; оправдание-содержание: центр; выровнять-элементы: по центру; гибкая упаковка: nowrap; /* или перенос, перенос-обратный */ }
Я пробовал настроить гибкий дисплей на встроенный, но это не сработало. Я попытался добавить левое поле для перемещения этого текста, но когда я это сделал, он переместил все элементы в этом конкретном элементе div.