Lecția 14: Metode de Centrare în CSS

by

Overview:

Centrarea elementelor pe o pagină web este adesea crucială pentru obținerea unui aspect echilibrat și coerent. În această lecție, vom explora diverse metode de centrare în CSS pentru diferite tipuri de elemente.

Key Concepts:

  1. Centrarea Orizontală:
    • Utilizarea text-align: center; pentru a centra orizontal elementele în interiorul unui container.
  2. Centrarea Verticală:
    • Utilizarea display: flex; și align-items: center; pentru a centra vertical elementele într-un container.
  3. Centrarea Absolută:
    • Utilizarea position: absolute; și top: 50%; left: 50%; transform: translate(-50%, -50%); pentru a centra absolut un element în interiorul părintelui.
  4. Centrarea Flexibilă:
    • Utilizarea display: flex; și proprietățile justify-content și align-items pentru a centra elementele flexibile.

Detailed Examples:

1. Centrarea Orizontală cu text-align:
/* Centrarea orizontală a textului */
.container-horizontal {
  text-align: center;
}
2. Centrarea Verticală cu display: flex:
/* Centrarea verticală a elementelor folosind flexbox */
.container-vertical {
  display: flex;
  align-items: center;
  height: 100vh; /* Setarea înălțimii la 100% din înălțimea vizibilă a ferestrei */
}
3. Centrarea Absolută:
/* Centrarea absolută a unui element în interiorul părintelui */
.element-absolut {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
4. Centrarea Flexibilă:
/* Centrarea elementelor flexibile */
.container-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Exercițiul Practic: CSS – Metode de Centrare

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercițiul Practic: Metode de Centrare</title>
  <style>
    /* Centrarea orizontală a textului */
    .centrat-orizontal {
      text-align: center;
    }

    /* Centrarea verticală a elementelor folosind flexbox */
    .centrat-vertical {
      display: flex;
      align-items: center;
      height: 100vh;
    }

    /* Centrarea absolută a unui element în interiorul părintelui */
    .centrat-absolut {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /* Centrarea elementelor flexibile */
    .centrat-flex {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
</head>
<body>

  <h1 class="centrat-orizontal">Centrare Orizontală</h1>

  <div class="centrat-vertical">
    <p>Centrare Verticală</p>
  </div>

  <div class="centrat-absolut">
    <p>Centrare Absolută</p>
  </div>

  <div class="centrat-flex">
    <p>Centrare Flexibilă</p>
  </div>

</body>
</html>

Recomandarea pentru includerea stilului într-un fișier extern (în loc să fie direct în head) rămâne validă pentru proiecte mai mari sau pentru a menține o structură mai clară. Dar pentru exercițiul practic specific, am inclus stilul direct în head-ul documentului HTML.