- Како центрирати слику у Див хоризонтално?
- Маргин Проперти
- Флекбок Модуле
- Распоред приказа мреже
- Атрибут позиције
Како центрирати слику у Див хоризонтално?
Програмер може да користи својство маргине, Флекбок модул, изглед мреже и атрибут Поситион да хоризонтално центрира слику у див. Пратите доњи водич да бисте центрирали слику хоризонтално у ознаци див.
Претпоставимо да постоји див у коме је слика постављена на овај начин у ХТМЛ датотеку:
< див класа = 'корен' >
< имг срц = '../боок.јпг' висина = 'педесет%' ширина = 'педесет%' класа = 'слика' >
< / див >
Слика добија ширину и висину од 50% и класу „имаге“.
Коришћење својства маргине
Корисници могу да додају простор око ХТМЛ елемената користећи својство маргине. Додељује маргину у складу са расположивим простором након промене величине екрана прозора. На пример, поставља маргину лево и десно на аутоматски, а својство приказа је подешено да блокира:
имг {
дисплеј блок;
маргин-лефт: ауто;
маргин-ригхт: ауто;
}
Након извршења горњег примера, веб страница изгледа овако:
Горњи излаз је показао да је слика сада у центру.
Коришћење Флекбок модула
„ флекбок ” је модул који садржи комплетан скуп својстава. У нашем случају, изаберите класу основног елемента и користите флек као вредност својства приказа. Поставите центар као вредност за „ оправдати-садржај ' и ' алигн-итемс ” својства:
.корен {дисплеј: флек;
оправдати- садржаја : центар;
алигн-итемс: центар;
позадина- боја : Плави;
}
Веб страница изгледа овако, након извршавања кода:
Горњи излаз показује да је слика приказана у центру див са бојом позадине постављеном на „плаву“.
Коришћење модула распореда приказа мреже
Изглед приказа мреже има 12 колона, а укупна ширина је подешена на 100% и сваки елемент поставља на одређену позицију на веб страници:
.корен {приказ: мрежа;
плаце-итемс: центар;
}
У горњем исечку кода, вредност „мреже“ је додељена својству приказа. Док се „плаце-итем“ користи као скраћеница за својства „јустифи-цонтент“ и „алигн-итемс“:
Излаз потврђује да је слика у центру див користећи метод мреже:
Коришћење атрибута позиције
Постављањем позиције основне класе на релативну вредност и класе слике на апсолутну вредност. Слика се може приказати у центру див:
.корен {положај: релативан;
}
.слика {
ширина : 700пк;
висина : 500пк;
позиција: апсолутна;
лево: педесет %;
трансформисати: транслатеКс ( - педесет % ) ;
}
Слика се помера лево од „50%“ и затим се трансформише назад у „-50%“ на Кс-оси. Приказује слику у центру див хоризонтално:
Тако се слика може центрирати у див хоризонтално.
Закључак
Да бисте хоризонтално поставили слику у елемент див, користите „ маргина ”, “ флек модул ”, “ распоред мреже ' и ' положај ” својства. „ маргина ” својство лево и десно је подешено на ауто. „Флек модул“ и „грид Лаиоут“ постављају екран на флекс и мрежу и користе „ место предмет “ својство за центрирање слике. Својство положаја поставља вредност релативну у односу на основну класу и апсолутну на класу слике и користи својства „лево“ и „трансформисање“. Овај блог је успешно демонстрирао како хоризонтално центрирати слике у див.