Kako centrirati sliku u css-u?

Ivana S.·3. jul 2025.·2 min read

Postoji nekoliko načina da centriramo sliku u css-u. U ovom tutorijalu naučićete da to samostalno uradite metodom centriranja texta i auto margin metodom. Ako znaš kako ubaciti sliku u html dokument predji na centriranje slike .

Kako ubaciti sliku u css-u i html-u?

Pre nego sto pređemo na centriranje, proći ćemo kroz načne ubacivanja slika u naš html dokument. Prvi način je sa sliku ubacimo koristeći html element img, tako sto ćemo u atribut src navesti putanju do slike.

<img src=”image.jpg” />

Drugi način je da napravimo div i unutar css-a selektujemo dati div. Zatim kao vrednost atributa background-image postavimo putanju do slike.

<html>
<head>
<style>
.image {
background-image: url("image.jpg");
height: 450px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="image">
</div>
</body>
</html>

Ono sto još možemo da primetimo, jeste da nam je slika koja se nalazi u div-u responsive. Odnosno, slika se skalira pomeranjem browser-a.

Centriranje slike

Nakon što smo ubacili sliku u naš dokument, hajde da vidimo kako da je horizontalno centriramo. Kako bismo sliku postavili na sredninu stranice, potrebno je uraditi sledece:

postaviti img tag unutar roditeljskog div elementa

postaviti atribut text-align: center na roditeljski div

<html>
    <head>
        <style>
            .img-container {
                text-align: center;
            }
        </style>
    </head>
    <body>
      <div class="img-container">
         <img src="image.jpg" />
      </div>
    </body>
</html>

Drugi nacin je da postavimo na img element sledece atribute:

postavimo display: block

margin: 0px auto;

Slika ima svoju širinu, sa margin: 0px auto, levu i desnu marginu browser automatski postavi koliko je potrebno da bi se slika nasla na sredini stranice.

<html>
<head>
<style>
img {
display: block;
margin: 0px auto;
}
</style>
</head>
<body>
<img src="image.jpg"/>
</body>
</html>