Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kurs Javy /Frontend SELF PL /Centrowanie elementów

Centrowanie elementów

Frontend SELF PL
Poziom 22 , Lekcja 3
Dostępny

9.1 Poziome centrowanie

Centrowanie elementów na stronie to jedna z podstawowych zadań w web designie. Pozwala na stworzenie estetycznych i łatwych do odczytania układów. Poniżej przyjrzymy się różnym metodom centrowania poziomego i pionowego elementów, używając nowoczesnych technik CSS.

1. Centrowanie elementów blokowych za pomocą margin: auto

Jednym z najprostszych sposobów centrowania elementów blokowych jest użycie margin: auto.

Przykład:

CSS
    
      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
        margin: 0 auto;
      }
HTML
    
      <div class="centered-box"></div>

Wyjaśnienie kodu:

  • margin: 0 auto;: ustawia automatyczne marginesy po lewej i prawej stronie, centrowanie elementu w poziomie

2. Centrowanie elementów linowych za pomocą text-align

Aby wycentrować elementy linowe lub wbudowane wewnątrz elementu blokowego, można użyć właściwości text-align: center.

Przykład:

CSS
    
      .container {
        text-align: center;
        background-color: #f1c40f;
        padding: 20px;
      }

      .inline-element {
        background-color: #e74c3c;
        display: inline-block;
        padding: 10px;
        color: white;
      }
Java university
HTML
    
      <div class="container">
        <div class="inline-element">Element linowy</div>
      </div>

Wyjaśnienie kodu:

  • text-align: center;: centrowanie elementów wbudowanych (linowych) wewnątrz bloku

3. Centrowanie elementów za pomocą Flexbox

Flexbox zapewnia elastyczny i prosty sposób centrowania elementów zarówno w poziomie, jak i w pionie.

Przykład:

CSS
    
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #2ecc71;
      }

      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }
HTML
    
      <div class="flex-container">
        <div class="centered-box"></div>
      </div>

Wyjaśnienie kodu:

  • display: flex;: ustawia kontener jako Flexbox
  • justify-content: center;: centrowanie elementów w poziomie
  • align-items: center;: centrowanie elementów w pionie (będzie omówione dalej)

9.2 Pionowe centrowanie

1. Centrowanie za pomocą Flexbox

Flexbox zapewnia prosty sposób pionowego centrowania elementów.

Przykład:

CSS
    
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #2ecc71;
      }

      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }
HTML
    
      <div class="flex-container">
        <div class="centered-box"></div>
      </div>

Wyjaśnienie kodu:

  • align-items: center;: centrowanie elementów w pionie

2. Centrowanie za pomocą CSS Grid

CSS Grid oferuje potężne możliwości centrowania elementów:

CSS
    
      .grid-container {
        display: grid;
        place-items: center;
        height: 100vh;
        background-color: #9b59b6;
      }

      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }
HTML
    
      <div class="grid-container">
        <div class="centered-box"></div>
      </div>

Wyjaśnienie kodu:

  • display: grid;: ustawia kontener jako CSS Grid
  • place-items: center;: centrowanie elementów w poziomie i pionie

3. Pionowe centrowanie za pomocą pozycji absolutnego i CSS transform

Użycie pozycji absolutnego i CSS transform pozwala centrować elementy w pionie.

Przykład:

CSS
    
      .container {
        position: relative;
        height: 100vh;
        background-color: #e74c3c;
      }

      .centered-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }
HTML
    
      <div class="container">
        <div class="centered-box"></div>
      </div>

Wyjaśnienie kodu:

  • position: absolute;: ustawia element w absolutnej pozycji względem kontenera
  • top: 50%;, left: 50%;: przesuwa element o 50% od górnej i lewej krawędzi kontenera
  • transform: translate(-50%, -50%);: przesuwa element o 50% jego szerokości i wysokości w celu centrowania

4. Pionowe centrowanie za pomocą tabeli i komórek

Użycie tabeli i komórek do centrowania elementów w pionie.

Przykład:

CSS
    
      .table-container {
        display: table;
        width: 100%;
        height: 100vh;
        background-color: #f39c12;
      }

      .table-cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

      .centered-box {
        display: inline-block;
        background-color: #3498db;
        padding: 20px;
        color: white;
      }
HTML
    
      <div class="table-container">
      <div class="table-cell">
        <div class="centered-box">Wycentrowany element</div>
      </div>
    </div>

Wyjaśnienie kodu:

  • .table-container: tworzy kontener z wyświetleniem table
  • .table-cell: tworzy komórkę tabeli z pionowym wyrównaniem middle
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION