Kako centrirati sliku u css-u?

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>