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>Hvala ti što si pročitao/la naš blog post. Prijavi se na naš newsletter i primaj besplatan edukativan sadržaj direktno u inbox!
Happy coding!
