Адаптивный веб-сайт может адаптировать размер экрана и размеры устройства, на котором его просматривают. Наряду с отзывчивостью веб-сайта также необходимо, чтобы изображения и текст были выровнены и отзывчивы. Выровненные изображения — это те, которые обертывают вокруг себя текст. Выровненный текст — это тот, который выглядит как целый абзац.
В этой статье будет рассмотрен метод адаптивного выравнивания изображений и текста.
Как адаптивно выровнять изображения и текст?
Содержимое, включая изображения и текст, можно оперативно выровнять с помощью Bootstrap. Для демонстрации мы привели два примера:
- По центру выровняйте текст по вертикали, а изображение по горизонтали.
- Выровняйте текст и адаптивное изображение по левому краю.
Пример 1. Выравнивание текста по центру по вертикали и изображения по горизонтали
Сначала попробуйте центрировать изображение по горизонтали, а текст по вертикали. Для этого следуйте инструкциям, представленным ниже:
Шаг 1. Создайте структуру HTML
При создании структуры HTML сначала свяжите файл « Бутстрап », а также внешний файл CSS. После этого создайте <дел> контейнер и включите изображение, используя <изображение> тег и текст:
< тело >
< делитель сорт '=' 'контейнер' >
< исходник изображения = 'тест-изображение.jpg' все '=' «тестовое изображение» >
< класс div = 'текст' > Это какой-то текст. делитель >
делитель >
тело >
Шаг 2. Примените CSS
На контейнере:
- Теперь отцентрируйте содержимое, применив CSS к « Контейнер ' сорт.
- Установить ' гибкий «ценность имущества» отображать », чтобы создать флексбокс.
- Установить «выровнять-элементы » собственность в « центр », чтобы центрировать выравнивание по вертикали.
- Установить ' оправдание-содержание Установите значение свойства «center», чтобы центрировать выравнивание по горизонтали.
- Наконец, укажите значение « центр «в собственность» выравнивание текста », чтобы центрировать текст.
На <изображение> :
- Укажите « Максимальная ширина «свойство по стоимости» центр », чтобы гарантировать масштабирование изображения вместе с его контейнером.
- Укажите значение « авто » к « высота ” для сохранения соотношения сторон изображения.
По тексту:
- Установите размер шрифта текста « 16 пикселей », указав значение «16px» для « размер шрифта ».
- Определите ширину текста, назначив параметр « Максимальная ширина » имущество стоимостью « 390 пикселей »:
отображать: гибкий ;
выравнивание текста: по центру;
оправдание-содержание: центр;
выровнять-элементы: по центру;
}
изображение {
Максимальная ширина: 100 % ;
высота: авто;
}
.текст {
размер шрифта: 16 пикселей;
максимальная ширина: 390 пикселей;
}
Можно заметить, что текст центрирован по вертикали, а изображение — по горизонтали:
Пример 2. Выравнивание текста и адаптивного изображения по левому краю
В данном примере изображение и текст будут выровнены по левому краю. Для этого выполните следующие пошаговые инструкции:
Шаг 1. Создайте структуру HTML
HTML-код такой же, как и выше, использованный в примере.
Шаг 2. Примените CSS
На контейнере:
- Установить ' гибкое направление ” стоимость недвижимости до “ столбец ” для вертикального расположения элементов на маленьких экранах.
- Установить ' выравнивание элементов ” стоимость недвижимости до “ гибкий старт » влево, чтобы выровнять элементы.
- Наконец, установите свойство « выравнивание текста » к « левый ” для выравнивания текста по левому краю.
На <изображение> :
- То же, что и в приведенном выше примере.
По тексту:
- То же, что и в приведенном выше примере:
отображать: гибкий ;
гибкое направление: столбец;
выровнять-элементы: гибкий старт;
выравнивание текста: по левому краю;
}
изображение {
Максимальная ширина: 100 % ;
высота: авто;
}
.текст {
размер шрифта: 16 пикселей;
максимальная ширина: 390 пикселей;
}
Вывод подтверждает, что текст и изображение выровнены по левому краю:
Заключение
Чтобы быстро выровнять изображения и текст, сначала создайте сетку или гибкий макет в CSS, а затем установите параметр « выровнять-элемент ” стоимость недвижимости до “ центр ». Это приведет к адаптивному выравниванию изображений и текста в CSS. Эта статья предоставила пользователям полное руководство по адаптивному выравниванию изображений и текста.