Мобильная версияЯ создаю веб-сайт для обучения в рамках React. Сейчас я занимаюсь оформлением основной части сайта, но не могу понять, как выровнять элемент img по кнопкам h1, h2, p и кнопке.
импортировать React из «реагировать»; импортируйте mainImage из './assets/restauranfood.jpg' функция Main() { возвращаться ( Маленький лимон Чигаго Little Lemon — очаровательное местное бистро, в котором подают простую еду и классические коктейли в оживленной, но непринужденной обстановке. В ресторане предлагается меню из местных продуктов и фирменные блюда дня.
Зарезервировать столик
) } экспорт по умолчанию Основной
* { маржа: 0; заполнение: 0; размер коробки: 0; } .Приложение { выравнивание текста: по центру; } .App-логотип { высота: 40вмин; события указателя: нет; } @media (предпочитает уменьшение движения: нет предпочтений) { .App-логотип { анимация: вращение логотипа приложения, бесконечные 20 секунд, линейная; } } .App-заголовок { цвет фона: #282c34; минимальная высота: 100vh; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; размер шрифта: Calc (10 пикселей + 2vmin); белый цвет; } .App-ссылка { цвет: #61dafb; } @keyframes App-logo-spin { от { преобразование: поворот (0 градусов); } к { преобразование: поворот (360 градусов); } } .навигация а { черный цвет; текстовое оформление: нет; отступ: 6 пикселей 6 пикселей; радиус границы: 5 пикселей; переход: фоновый цвет 0,3 с; начертание шрифта: жирный; размер шрифта: 20 пикселей; семейство шрифтов: «Текст Маркази», с засечками; } .navigation a:hover { цвет фона: #FFE500; } .navigation a.active { цвет фона: #FFE500; } .навигация { дисплей: гибкий; гибкое направление: строка; flex-wrap: обертка; выровнять-элементы: по центру; оправдание-содержание: пространство между; цвет фона: белый; поле: 5 пикселей; отступ: 10 пикселей 20 пикселей; } @media screen и (максимальная ширина: 768 пикселей) { .навигация { гибкое направление: столбец; отступ: 10 пикселей; } .навигация а { отступ: 10 пикселей; поле внизу: 10 пикселей; } .navigation a:hover { отступ: 10 пикселей; } } .main-grid { дисплей: сетка; столбцы шаблона сетки: 1fr 1fr 1fr; цвет фона: #495E57; поле внизу: 50 пикселей; выровнять-элементы: начало; столбцы-шаблона сетки: авто авто; строки-шаблона сетки: авто; } .main-grid h1 { цвет: #FFE500; семейство шрифтов: «Текст Маркази», с засечками; начертание шрифта: жирный; размер шрифта: 64 пикселей; отступ слева: 40 пикселей; отступ сверху: 10 пикселей; } .main-grid h2 { белый цвет; семейство шрифтов: «Текст Маркази», с засечками; размер шрифта: 40 пикселей; шрифт-вес: нормальный; выровнять-сам: начать; столбец сетки: 1; отступ слева: 40 пикселей; } .main-grid p { белый цвет; отступ слева: 40 пикселей; отступ сверху: 10 пикселей; семейство шрифтов: «Текст Маркази», с засечками; размер шрифта: 22 пикселей; шрифт: светлее; столбец сетки: 1; ширина: 70%; } кнопка .main-grid { отступ: 10 пикселей 10 пикселей; радиус границы: 16 пикселей; поле: 40 пикселей; цвет фона: #F4CE14; начертание шрифта: жирный; семейство шрифтов: «Текст Маркази», с засечками; размер шрифта: 18 пикселей; столбец сетки: 1; ширина: 150 пикселей; } .main-grid > * { столбец сетки: 1; } .main-grid img { высота: 400 пикселей; ширина: 300 пикселей; сетка-столбец: 3; оправдать себя: центр; выровнять-сам: центр; отступ справа: 100 пикселей; } На самом деле вывод1 Желаемый результат
Я уже пробовал использовать flexbox, сетку и все параметры стиля, но застрял.
