Прилагодљива веб локација може прилагодити величину екрана и димензије уређаја на којима се приказује. Заједно са брзим одзивом веб странице, неопходно је и да су слике и текст усклађени и да реагују. Поравнане слике су оне које омотавају текст око себе. Док је поравнати текст онај који изгледа као цео пасус.
Овај чланак ће размотрити метод за прилагођавање слика и текста.
Како брзо поравнати слике и текст?
Садржај, укључујући слике и текст, може се брзо поравнати помоћу Боотстрап-а. Да бисмо пружили демонстрацију, навели смо два примера:
Пример 1: Центрирајте текст вертикално и слику хоризонтално
Прво покушајте да центрирате слику хоризонтално, а текст вертикално. У ту сврху следите доленаведена упутства:
Корак 1: Креирајте ХТМЛ структуру
Док креирате ХТМЛ структуру, прво повежите „ Боотстрап ” као и екстерну ЦСС датотеку. Након тога, креирајте а <див> контејнер и укључите слику користећи <имг> ознака и текст:
< тело >
< див класа = 'контејнер' >
< имг срц = 'тест-имаге.јпг' све = 'тестна слика' >
< див класа = 'текст' > Ово је неки текст. див >
див >
тело >
Корак 2: Примените ЦСС
На контејнеру:
- Сада центрирајте садржај тако што ћете применити ЦСС на „ Контејнер ' класа.
- Подесите ' флек ” вредност својства “ приказ ” да бисте креирали флексбокс.
- Подесите „алигн-итемс “ својство на “ центар ” да бисте вертикално центрирали поравнање.
- Подесите ' оправдати-садржај ” вредност својства на „центар” да хоризонтално центрира поравнање.
- На крају, наведите вредност „ центар “ до имовине “ Поравнање текста ” да центрирате текст.
на <имг> :
- Наведите „ максимална ширина ” својство на вредност “ центар ” како би се осигурало да се слика скалира заједно са својим контејнером.
- Наведите вредност ' ауто ' до ' висина ” за одржавање односа ширине и висине слике.
На тексту:
- Подесите величину фонта текста на „ 16пк ” тако што ћете навести вредност „16пк“ у „ фонт-сизе ”.
- Дефинишите ширину текста тако што ћете доделити „ максимална ширина ” својство вредност од “ 390пк ”:
приказ: флек ;
тект-алигн: центар;
јустифи-цонтент: центар;
алигн-итемс: центар;
}
имг {
максимална ширина: 100 % ;
висина: ауто;
}
.текст {
фонт-сизе: 16пк;
мак-видтх: 390пк;
}
Може се приметити да је текст вертикално центриран, а слика хоризонтално центрирана:
Пример 2: Лево поравнајте текст и слику која одговара
У овом примеру, слика и текст ће бити поравнати лево. У ту сврху, прођите кроз доле наведена упутства:
Корак 1: Креирајте ХТМЛ структуру
ХТМЛ код је исти као горе, коришћен у примеру.
Корак 2: Примените ЦСС
На контејнеру:
- Подесите ' флек-дирецтион ” вредност својства на “ колона ” за вертикално слагање ставки на малим екранима.
- Подесите ' алигн-итемс ” вредност својства на “ флек-старт ” са леве стране да бисте поравнали ставке.
- На крају, подесите својство „ Поравнање текста ' до ' лево ” за лево поравнање текста.
на <имг> :
- Исто као што је коришћено у горњем примеру.
На тексту:
- Исто као што се користи у горњем примеру:
приказ: флек ;
флек-дирецтион: колона;
алигн-итемс: флек-старт;
тект-алигн: лефт;
}
имг {
максимална ширина: 100 % ;
висина: ауто;
}
.текст {
фонт-сизе: 16пк;
мак-видтх: 390пк;
}
Излаз потврђује да су текст и слика поравнати лево:
Закључак
Да бисте ускладили слике и текст на одговарајући начин, прво направите мрежу или флексибилни изглед у ЦСС-у, а затим поставите „ алигн-итем ” вредност својства на “ центар ”. Ако то урадите, слике и текст ће се ускладити у ЦСС-у. Овај текст је корисницима пружио комплетан водич за прилагођавање слика и текста на одговарајући начин.