Dərslər
Başlamaq
Öyrənməyə başlayın
CodeGym /Kurslar /Frontend SELF AZ /Elementlərin mərkəzləşdirilməsi

Elementlərin mərkəzləşdirilməsi

Frontend SELF AZ
Səviyyə , Dərs
Mövcuddur

9.1 Üfüqi keskedilmə

Elementlərin keskedilməsi veb-səhifədə əsas veb-dizayn işlərindən biridir. Bu, estetik cəhətdən xoş və asan oxunan maketlər yaratmağa imkan verir. Aşağıda biz CSS-də müasir texnikalardan istifadə edərək elementlərin üfüqi və şaquli keskedilməsini müzakirə edəcəyik.

1. Blok elementlərin margin: auto ilə keskedilməsi

Blok elementlərin keskedilməsinin ən sadə üsullarından biri margin: auto istifadə etməkdir.

Nümunə:

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

Kodun izahı:

  • margin: 0 auto;: sol və sağ tərəfdə avtomatik boşluqlar verir, elementi üfüqi olaraq keskedir

2. Sətir elementlərinin text-align ilə keskedilməsi

Blok element daxilində olan sətir və ya inline elementləri text-align: center xüsusiyyəti ilə keskedə bilərsiniz.

Nümunə:

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

      .inline-element {
        background-color: #e74c3c;
        display: inline-block;
        padding: 10px;
        color: white;
      }
HTML 
    
      <div class="container">
        <div class="inline-element">Sətir elementi</div>
      </div>

Kodun izahı:

  • text-align: center;: blok konteyner daxilində inline (sətir) elementləri keskedilir

3. Flexbox ilə elementlərin keskedilməsi

Flexbox, elementləri həm üfüqi, həm də şaquli olaraq keskedmək üçün çevik və sadə bir üsul təqdim edir.

Nümunə:

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>

Kodun izahı:

  • display: flex;: konteyneri Flexbox olaraq təyin edir
  • justify-content: center;: elementləri üfüqi olaraq keskedir
  • align-items: center;: elementləri şaquli olaraq keskedir (bu barədə daha ətraflı müzakirə olunacaq)

9.2 Şaquli mərkəzləşdirmə

1. Flexbox ilə mərkəzləşdirmə

Flexbox elementləri şaquli mərkəzləşdirmək üçün sadə bir üsul təqdim edir.

Nümunə:

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>

Kodun izahı:

  • align-items: center;: elementləri şaquli mərkəzləşdirir

2. CSS Grid ilə mərkəzləşdirmə

CSS Grid elementlərin mərkəzləşdirilməsi üçün güclü imkanlar təqdim edir:

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>

Kodun izahı:

  • display: grid;: konteyneri CSS Grid kimi təyin edir
  • place-items: center;: elementləri üfüqi və şaquli olaraq mərkəzləşdirir

3. Absolute positioning və CSS transform ilə şaquli mərkəzləşdirmə

Absolute positioning və CSS transform istifadəsi elementləri şaquli olaraq mərkəzləşdirməyə imkan verir.

Nümunə:

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>

Kodun izahı:

  • position: absolute;: elementi konteynerin nisbi mövqeyinə görə yerləşdirir
  • top: 50%;, left: 50%;: elementi konteynerin yuxarı və sol kənarından 50% mövqeyinə çəkir
  • transform: translate(-50%, -50%);: elementi öz eni və hündürlüyünün 50%-nə çəkərək mərkəzləşdirir

4. Cədvəl və hüceyrələr ilə şaquli mərkəzləşdirmə

Elementlərin şaquli mərkəzləşdirilməsi üçün cədvəl və hüceyrələrdən istifadə edir.

Nümunə:

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">Mərkəzləşdirilmiş element</div>
      </div>
    </div>

Kodun izahı:

  • .table-container: konteyneri table displeyi ilə yaradır
  • .table-cell: middle şaquli hizalama ilə cədvəl hüceyrəsini yaradır
Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION