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

Многи програмери се муче док раде са сликама. Руковање одзивом и поравнањем је посебно тешко, посебно центрирање слике на средини странице.

Дакле, у овом посту ћу показати неке од најчешћих начина центрирања слике вертикално и хоризонтално помоћу различитих ЦСС својстава.

Прегледао сам својства ЦСС положаја и приказа у свом претходном посту. Ако нисте упознати са тим својствима, препоручујем да погледате те постове пре читања овог чланка.

Ево видео верзије ако желите да је погледате:

Хоризонтално центрирање слике

Почнимо са центрирањем слике хоризонтално помоћу 3 различита ЦСС својства.

Поравнање текста

Први начин да се слика центрира водоравно је коришћење text-alignсвојства. Међутим, овај метод делује само ако се слика налази у контејнеру на нивоу блока, као што је :

 div { text-align: center; } 

Маржа: Ауто

Други начин за центрирање слике је коришћење margin: autoсвојства (за леву и десну маргину).

Међутим, само коришћење margin: autoнеће успети за слике. Ако требате да користите margin: auto, постоје још 2 својства која такође морате да користите.

Својство маргин-ауто нема утицаја на елементе на нивоу линије. С обзиром да је ознака уграђени елемент, прво је морамо претворити у елемент на нивоу блока:

img { margin: auto; display: block; }

Друго, такође морамо да дефинишемо ширину. Дакле, лева и десна маргина могу заузети остатак празног простора и аутоматски се поравнати, што чини трик (осим ако му не дамо ширину од 100%):

img { width: 60%; margin: auto; display: block; }

Дисплеј: Флек

Трећи начин хоризонталног центрирања слике је коришћењем display: flex. Баш као што смо користили text-alignсвојство за контејнер, користимо и display: flexза контејнер.

Међутим, само коришћење display: flexнеће бити довољно. Контејнер такође мора имати додатно својство под називом justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

justify-contentИмовина ради заједно са display: flexкоје можемо да користимо до центра слику хоризонтално.

Коначно, ширина слике мора бити мања од ширине контејнера, у супротном заузима 100% простора и тада не можемо да је центрирамо.

Важно:display: flex имовина није подржан у старијим верзијама претраживача. Погледајте овде за више детаља.

Центрирање слике вертикално

Дисплеј: Флек

За вертикално поравнање употреба display: flexје заиста корисна.

Размотримо случај када наш контејнер има висину од 800 пиксела, али висина слике је само 500 пиксела:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Сада, у овом случају, додавање једног ретка кода у контејнер,, изводи align-items: centerтрик:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

У align-itemsНекретнина може Елементи положај вертикално ако се користе заједно са display: flex.

Позиција: Апсолутна и својства трансформације

Друга метода за вертикално изравнање је коришћењем positionи transformсвојства заједно. Овај је мало компликован, па учинимо то корак по корак.

Корак 1: Дефинисање апсолутне позиције

Прво, мењамо позиционо понашање слике са staticна absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Такође, требало би да се налази у релативно позиционираном контејнеру, па додајемо position: relativeу његов контејнер див.

Корак 2: Дефинишите горња и лева својства

Друго, дефинишемо горња и лева својства слике и поставимо их на 50%. Ово ће померити почетну тачку (горе-лево) слике у средиште контејнера:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

Корак 3: Дефинишите својство трансформације

Али други корак је делимично померио слику изван њеног контејнера. Зато га морамо вратити унутра.

Дефинисање transformсвојства и додавање -50% на његову Кс и И осу чини трик:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Постоје и други начини да се ствари центрирају хоризонтално и вертикално, али објаснио сам најчешће. Надам се да вам је овај пост помогао да разумете како да поравнате слике у средини странице.

Ако желите да сазнате више о веб развоју, слободно посетите мој Иоутубе канал да бисте сазнали више.

Хвала вам за читање!