Centrarea Imaginilor
Imaginile pot fi centrate în trei moduri: orizontal, vertical sau pe ambele axe în același timp.
CSS oferă mai multe metode pentru asta.
Centrarea unei Imagini Orizontal
Două variante obișnuite pentru a centra o imagine orizontal sunt margin: auto și display: flex.
Folosind margin: auto
margin: auto este prima dintre cele două opțiuni pentru centrarea orizontală.
Nu are niciun efect asupra elementelor inline, iar <img> este inline în mod implicit, așa că imaginea are nevoie mai întâi de display: block.
Este necesară și o width, iar aceasta trebuie să fie mai mică decât lățimea paginii.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with margin auto</title>
<style>
img {
display: block;
margin: auto;
width: 50%;
}
</style>
</head>
<body>
<h2>Centered Image</h2>
<img src="madrid.jpg" alt="Madrid">
</body>
</html>
Folosind display: flex
display: flex oferă o a doua cale spre centrarea orizontală.
Plasează elementul <img> într-un <div>, apoi dă-i acelui container aceste două declarații:
display: flexjustify-content: center(centrarea orizontală a imaginii)
La final, alege pentru imagine o width mai mică decât lățimea paginii.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with Flexbox Horizontal</title>
<style>
div {
display: flex;
justify-content: center;
}
img {
width: 50%;
}
</style>
</head>
<body>
<h2>Centered Image</h2>
<div>
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Centrare Verticală și Orizontală
Centrarea adevărată înseamnă ambele direcții deodată, vertical și orizontal. Poți face asta fie cu display: flex, fie cu display: grid.
Folosind display: flex
Cu flexbox, centrarea unei imagini pe ambele axe deodată necesită toate aceste declarații împreună:
display: flexjustify-content: center(centrare orizontală)align-items: center(centrare verticală)height: 600px(cât de înalt este containerul)
Plasează elementul <img> într-un container <div> și păstrează valoarea width a imaginii sub lățimea containerului.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with Flexbox Both Axes</title>
<style>
div {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}
</style>
</head>
<body>
<h2>Centered Image</h2>
<div>
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Folosind display: grid
Cu grid, centrarea unei imagini pe ambele axe deodată necesită această combinație:
display: gridplace-items: center(centrare atât orizontală, cât și verticală)height: 600px(cât de înalt este containerul)
Și aici, elementul <img> intră într-un container <div>, iar imaginea primește o width mai mică decât cea a containerului.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with Grid Both Axes</title>
<style>
div {
display: grid;
place-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}
</style>
</head>
<body>
<h2>Centered Image</h2>
<div>
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>