Како центрирати слике помоћу ЦСС-а

Желите да центрирате слику помоћу ЦСС-а? Проблеми са усклађивањем често су извор фрустрација за веб дизајнере. Срећом, центрирање слике помоћу ЦСС-а је заиста једноставно, а ми ћемо вам показати како да то урадите у неколико корака.

Као и код многих задатака веб дизајна, постоји више од једног начина да се то уради! У овом чланку ћемо покрити три главне методе. Хајде да почнемо!

1. Користите својство маргине

Подешавање маргина својство је један од најлакших начина за хоризонтално центрирање слике помоћу ЦСС-а. Марже су основна компонента модел ЦСС кутије.

Прво, мораћете да трансформишете елемент слике из уметнутог у блок. ХТМЛ елементи на нивоу блока заузимају пуну ширину свог родитељског елемента и способни су да заузму целу ширину странице.

Ако елемент слике направите блок елементом, можете манипулисати његовом позицијом подешавањем његових хоризонталних маргина. Такође ћете морати да подесите одређену ширину за слику да бисте одредили колико простора слика заузима на страници.

Коју год ширину да одаберете, слика ће морати да има једнаке леве и десне маргине. То можете лако постићи тако што ћете својству маргине дати вредност од

ауто:

имг.центер {
 дисплеј блок;
 маргин-лефт: ауто;
 маргин-ригхт: ауто;
 ширина: 800пк;
}

2. Користите Флекбок Лаиоут

Овај метод захтева стављање слике у елемент на нивоу блока, обично а див:

Када то урадите, можете додати нека својства да бисте манипулисали његовим изгледом. Користићете два ЦСС својства.

Први је приказ својство чија је вредност постављена на флек. Можете такође користите флек за поравнавање елемената у ХТМЛ-у. Друго својство које ћете додати свом див је оправдати-садржај, са његовом вредношћу постављеном на центар овако:

див.центер {
 дисплеј: флек;
 јустифи-цонтент: центар;
}

3. Користите застарели елемент центра

Најбоље веб праксе вас подстичу да користите ЦСС за стилизовање и ХТМЛ за семантику, тако да не би требало да користите овај ХТМЛ метод. Тхе центар таг, који центрира свој садржај хоризонтално, је застарео у ХТМЛ5.

Али ако морате, ево како да центрирате слику користећи само ХТМЛ. Једноставно умотајте имг означите у средишњој ознаци овако:

Ево како да поравнате своје слике у ХТМЛ-у

Показали смо вам три различите методе које се лако користе за центрирање слика у ХТМЛ документу. Испробајте их све и изаберите онај који вам највише одговара. Избегавајте трећи метод осим ако немате апсолутно никаквог избора!

Једна ствар коју треба имати на уму је да постоји још доста начина за центрирање слика помоћу ХТМЛ-а и ЦСС-а. Једна уобичајена метода која ради и за текст и за слике је Поравнање текста својство.

Како центрирати текст на вашој веб страници помоћу ЦСС-а

Реад Нект

О аутору