Как да центрирате изображение вертикално и хоризонтално с CSS

Много разработчици се борят, докато работят с изображения. Работата с отзивчивостта и подравняването е особено трудна, особено центрирането на изображение в средата на страницата.

Така че в тази публикация ще покажа някои от най-често срещаните начини за центриране на изображение както вертикално, така и хоризонтално, като се използват различни CSS свойства.

Прегледах свойствата на CSS Position и Display в предишната ми публикация. Ако не сте запознати с тези свойства, препоръчвам да разгледате тези публикации, преди да прочетете тази статия.

Ето видео версия, ако искате да я проверите:

Центриране на изображението хоризонтално

Нека започнем с центриране на изображение хоризонтално, като използваме 3 различни CSS свойства.

Подравняване на текст

Първият начин за центриране на изображение хоризонтално е използването на text-alignсвойството. Този метод обаче работи само ако изображението е вътре в контейнер на ниво блок, като например :

 div { text-align: center; } 

Марж: Авто

Друг начин за центриране на изображение е чрез използване на margin: autoсвойството (за ляв и десен марж).

Самото използване обаче margin: autoняма да работи за изображения. Ако трябва да използвате margin: auto, има и 2 допълнителни свойства, които трябва да използвате.

Свойството margin-auto няма никакво въздействие върху елементите на ниво ред. Тъй като тагът е вграден елемент, първо трябва да го преобразуваме в елемент на ниво блок:

img { margin: auto; display: block; }

На второ място, ние също трябва да определим ширина. Така че лявото и дясното поле могат да заемат останалото празно пространство и да се подравнят автоматично, което прави трика (освен ако не му дадем ширина 100%):

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

Дисплей: Flex

Третият начин за центриране на изображението хоризонтално е чрез 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имота не се поддържа в по-старите версии на браузъри. Вижте тук за повече подробности.

Центриране на изображение вертикално

Дисплей: Flex

За вертикално подравняване използването display: flexотново е наистина полезно.

Помислете за случай, когато нашият контейнер има височина 800px, но височината на изображението е само 500px:

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към неговия div div.

Стъпка 2: Определете горни и леви свойства

На второ място, дефинираме горните и левите свойства на изображението и ги задаваме на 50%. Това ще премести началната точка (горе вляво) на изображението в центъра на контейнера:

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

Стъпка 3: Определете свойството Transform

Но втората стъпка премести изображението частично извън контейнера му. Затова трябва да го върнем вътре.

Определянето на transformсвойство и добавянето на -50% към неговата ос X и Y прави трика:

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

Има и други начини за центриране на нещата хоризонтално и вертикално, но аз обясних най-често срещаните. Надявам се, че тази публикация ви е помогнала да разберете как да подравните вашите изображения в центъра на страницата.

Ако искате да научите повече за уеб разработката, не се колебайте да посетите моя Youtube канал за повече.

Благодаря ви, че прочетохте!