Centrare Orizontală
CSS oferă mai multe moduri de a centra orizontal lucrurile, iar tipul elementului decide care dintre ele se potrivește.
Centrare Elemente de Tip Bloc
Un element de tip bloc, cum ar fi un <div>, este centrat cu margin: auto, cu condiția să aibă o width. Fără ea, elementul se întinde pentru a umple containerul.
Notă: Când width lipsește sau este setată la 100%, centrarea nu are niciun efect asupra elementelor de tip bloc.
Exemplu
Aici un element <div> cu o lățime de 50% stă în centru.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Block Element</title>
<style>
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align a Block Element</h2>
<div class="center">
<p>This div element is centered.</p>
</div>
</body>
</html>
Centrare Text
Textul aflat în interiorul unui element de tip bloc este centrat cu text-align: center.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Text</title>
<style>
p {
text-align: center;
}
</style>
</head>
<body>
<h2>Center Align Text</h2>
<p>This text is centered.</p>
</body>
</html>
Centrare Imagine
O imagine are nevoie de doi pași pentru a fi centrată: transform-o într-un element de tip bloc cu display: block, apoi setează atât margin-left, cât și margin-right la auto.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image</title>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<img src="madrid.jpg" alt="Madrid">
</body>
</html>
Aliniere Stânga și Dreapta - Folosind position
Setarea position: absolute este un mod de a alinia elementele la stânga sau la dreapta.
Notă: Elementele poziționate astfel ies din fluxul normal și se pot suprapune peste alte elemente.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right Align with Position</title>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right Align with position</h2>
<div class="right">
<p>This div element is positioned to the right, with the position: absolute property.</p>
</div>
</body>
</html>
Aliniere Stânga și Dreapta - Folosind float
Proprietatea float oferă un alt mod de a alinia un element la stânga sau la dreapta.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right Align with Float</title>
<style>
.right {
float: right;
width: 300px;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right Align with float</h2>
<div class="right">
<p>This div element has float: right.</p>
</div>
</body>
</html>