Как да подравнявате изображения и текст отзивчиво

Стъпка 2: Приложете CSS

На контейнер:

• Сега центрирайте съдържанието, като приложите CSS към „ Контейнер ” клас.
• Нагласи ' flex „стойност на имота“ дисплей ”, за да създадете flexbox.
• Нагласи „подравняване на елементи ” собственост към „ център ” стойност за вертикално центриране на подравняването.
• Нагласи ' justify-content ” стойност на свойството на „center” за хоризонтално центриране на подравняването.
• Накрая посочете стойността „ център „до имота“ подравняване на текст ”, за да центрирате текста.

На :

• Посочете „ максимална ширина „свойство към стойността“ център ”, за да гарантирате, че изображението се мащабира заедно с неговия контейнер.
• Посочете стойността „ Автоматичен ' към ' височина ” за поддържане на съотношението на изображението.

На текст:

• Задайте размера на шрифта на текста на „ 16px ”, като посочите стойността „16px” на „ размер на шрифта ”.
• Определете ширината на текста, като присвоите „ максимална ширина ” свойство стойност на “ 390 пиксела ”:

Може да се види, че текстът е центриран вертикално, а изображението е центрирано хоризонтално:

Пример 2: Ляво подравняване на текста и адаптивното изображение

В дадения пример изображението и текстът ще бъдат подравнени вляво. За тази цел преминете през поетапните инструкции по-долу:

Стъпка 1: Създайте HTML структура

HTML кодът е същият като по-горе, използван в примера.

Стъпка 2: Приложете CSS

На контейнер:

• Нагласи ' flex-direction „стойност на свойството към“ колона ”, за да подреждате елементи вертикално на малки екрани.
• Нагласи ' подравняване на елементи „стойност на свойството към“ гъвкав старт ” наляво, за да подравните елементите.
• И накрая, задайте свойството „ подравняване на текст ' към ' наляво ” за ляво подравняване на текста.

На :

• Същото като използваното в горния пример.

На текст:

• Същото като използваното в горния пример:

Резултатът потвърждава, че текстът и изображението са подравнени вляво:

Заключение

За да подравните изображения и текст отзивчиво, първо създайте мрежово или гъвкаво оформление в CSS, след което задайте „ подравняване на елемент ” стойност на свойството към „ център ”. Това ще подравни изображенията и текста отзивчиво в CSS. Това описание предостави на потребителите пълно ръководство за отзивчиво подравняване на изображения и текст.