да ли бисте желели да знате како центрирати слику у ДИВ? Центрирање слике у ДИВ-у може бити корисно за побољшање изгледа и организације ваше веб странице и за истицање слике коју желите да прикажете. Центрирајте слику у ДИВ није тешко, али то зависи од неколико фактора као што су тип слике, ДИВ величина, ДИВ стил итд.
У овом чланку ћемо објаснити како да центрирате слику у ДИВ-у користећи ХТМЛ и ЦСС, који су програмски језици који се користе за креирање и дизајн веб страница. Показаћемо вам неколико метода и примера како бисте могли да изаберете онај који вам највише одговара.
Шта је ДИВ
Див је ХТМЛ елемент који је навикнут креирајте одељке или контејнере на веб страници. Ово може да садржи друге елементе, као што су текст, слике, везе итд. Такође, ово је блок елемент, што значи да заузима целу ширину странице и то можете дефинисати његову висину и ширину. Див је генерички елемент, што значи да нема специфично семантичко значење. Из тог разлога, обично се користи са атрибутима класе или ид, да би див добио име или категорију. Такође се често користи са атрибут стила или са ЦСС стиловима, да бисте дали изглед или дизајн див.
Див се користи за организовање и структурирање садржаја веб странице и за примену својстава стила на њу. Помоћу див-а можете креирати оквир који садржи друге елементе и који може бити поравнат, центриран, обојен, осенчен итд. Формат се такође може користити за креирајте колоне или редове, да дистрибуира садржај на уредан и флексибилан начин. Генерално, може се користити и за креирање визуелних или интерактивних ефеката, као што су анимације, прелази, трансформације итд.
Како центрирати слику хоризонтално
Центрирајте слику хоризонтално у ДИВ значи поравнати слику у центру ширина ДИВ. Постоји неколико начина да се то уради, али најчешћи су следећи:
- Користите својство тект-алигн: центер. Ово својство се примењује на ДИВ елемент и доводи до тога да се сви елементи унутар ДИВ-а хоризонтално поравнају по средини. На пример:
- Коришћење својства маргине: ауто. Ово својство се примењује на ИМГ елемент и доводи до тога да слика има исте леве и десне маргине, центрирајући је хоризонтално. Да би ово функционисало, слика мора имати дефинисану ширину и бити типа блок или имати својство дисплаи: блоцк. На пример:
- Коришћење својства трансформације: транслатеКс(). Ово својство се примењује на ИМГ елемент и узрокује да се слика помера хоризонтално на одређено растојање од првобитне позиције. Да бисте га центрирали хоризонтално, морате га померити за 50% његове ширине удесно. Да би ово функционисало, слика мора имати дефинисану ширину и бити типа блок или имати својство дисплаи: блоцк. На пример:
Како центрирати слику вертикално
Центрирајте слику вертикално у ДИВ значи поравнати слику у центру висине ДИВ. Постоји неколико начина да се то уради, али најчешћи су следећи:
- Коришћење својства вертицал-алигн: средина. Ово својство се примењује на ИМГ елемент и узрокује да слика буде центрирана вертикално у односу на основну линију текста. Да би ово функционисало, ДИВ елемент мора имати дефинисану висину, а ИМГ елемент мора бити типа инлине или имати својство дисплаи: инлине. На пример:
- Коришћење својства маргин-топ и маргин-боттом. Ова својства се примењују на ИМГ елемент и узрокују да слика има исте горње и доње маргине, центрирајући је вертикално. Да би функционисао, ДИВ елемент мора имати дефинисану висину, а ИМГ елемент мора имати дефинисану висину и бити типа блок или имати својство дисплаи: блоцк. На пример:
- Коришћење својства трансформације: транслатеИ(). Овај пут се примењује на ИМГ елемент и узрокује да се слика помера вертикално на одређено растојање од првобитне позиције. Да бисте га центрирали вертикално, морате га померити 50% његове висине надоле. Да би функционисао, ДИВ елемент мора имати дефинисану висину, а ИМГ елемент мора имати дефинисану висину и бити типа блок или имати својство дисплаи: блоцк. На пример:
Како центрирати слику на обе осе
Центрирање слике на обе осе у ДИВ значи поравнајте слику у средини и ширине и висине ДИВ-а, ово је најсложеније. Постоји неколико начина да се то уради, али најчешћи су следећи:
- Коришћење својства тект-алигн: центер и својства вертицал-алигн: Миддле. Ова својства се примењују на ДИВ елемент и ИМГ елемент, респективно, и узрокују да се слика поравна и хоризонтално и вертикално. Да би ово функционисало, ДИВ елемент мора имати дефинисану висину, а ИМГ елемент мора бити типа инлине или имати својство дисплаи: инлине. На пример:
- Коришћење својства маргине: ауто. Овде се примењује на ИМГ елемент и доводи до тога да слика има једнаке маргине на све четири стране, центрирајући је на обе осе. Да би функционисао, ДИВ елемент мора имати дефинисану висину, а ИМГ елемент мора имати дефинисану ширину и висину и бити типа блок или имати својство дисплаи: блоцк. На пример:
- Коришћење својства трансформације: транслате(). У овом случају се примењује на ИМГ елемент и узрокује да се слика помери на одређено растојање од првобитне позиције у обе осе. Да бисте га центрирали, морате га померити 50% његове ширине удесно и 50% висине надоле. Да би функционисао, ДИВ елемент мора имати дефинисану висину, а ИМГ елемент мора имати дефинисану ширину и висину и бити типа блок или имати својство дисплаи: блоцк. На пример:
Центрирајте било коју слику
Центрирање слике у ДИВ-у може бити корисно да побољшате изглед и организацију ваше веб странице, и да бисте истакли слику коју желите да прикажете. Центрирање слике у ДИВ-у није тешко, али зависи од неколико фактора као што су тип слике, величина ДИВ-а, стил ДИВ-а итд.
У овом чланку објаснили смо како да центрирате слику у ДИВ-у користећи ХТМЛ и ЦСС, који су програмски језици који се користе за креирање и дизајн веб страница. Показали смо вам неколико метода и примера тако да можете изабрати онај који вам највише одговара.
Надамо се да вам се допао овај чланак и да сте научили како да центрирате слику у ДИВ-у. Ако имате било каквих питања или сугестија, оставите нам коментар. Такође можете поделити овај чланак са својим пријатељима или породицом којима се такође свиђа ХТМЛ или ЦСС. Кренимо на посао и програмирајмо!