ЦСС нам помаже да контролишемо приказ слика у веб апликацијама. Центрирање слика или текстова је уобичајен задатак у ЦСС-у. Да бисмо центрирали слику, морамо подесити вредност маргин-лево и маргин-десно до ауто и учини га блок елементом користећи дисплеј блок; имовина.
Ако је слика у елементу див, онда можемо користити тект-алигн: центар; својство за поравнавање слике са центром у див.
Тхе за елемент се каже да је уграђени елемент који се лако може центрирати применом тект-алигн: центар; својство ЦСС-а на родитељски елемент који га садржи.
Напомена: Слика се не може центрирати ако је ширина постављена на 100% (пуна ширина).
Можемо користити својство стенографије маргина и подесите га на ауто за поравнавање слике у центру, уместо да користите маргин-лево и маргин-десно имовина.
Хајде да видимо како да центрирамо слику применом тект-алигн: центар; својство свом родитељском елементу.
Пример
У овом примеру, поравнавамо слике помоћу тект-алигн: центар; имовина. Слика је у елементу див.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Тестирајте одмах Излаз
Пример
Сада користимо маргин-лефт: ауто; маргин-ригхт: ауто; и дисплеј блок; својства за поравнавање слике према центру.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Тестирајте одмах Излаз
