CodeGym /Kurslar /Frontend SELF AZ /Mətni hizalama

Mətni hizalama

Frontend SELF AZ

Səviyyə , Dərs

Mövcuddur

6.1 text-align xüsusiyyəti

Mətnin hizalanması — veb-səhifələrin stilizasiyasının ən vacib aspektlərindən biridir ki, bu da mətnin konteynerlərdə necə yerləşəcəyini idarə etməyə imkan verir. CSS mətnin hizalanması üçün iki əsas xüsusiyyət təqdim edir: text-align və vertical-align. Bu xüsusiyyətlər müvafiq olaraq mətni üfüqi və şaquli şəkildə hizalamağa imkan verir.

text-align xüsusiyyəti blok elementi daxilindəki mətnin üfüqi hizalanmasını idarə edir. O təyin edir ki, mətn elementin sərhədlərinə nisbətən necə hizalanacaq.

Dəyərlər

left: mətni sol tərəfə hizalama (sol-sağ istiqamətli mətn üçün standart olaraq)
right: mətni sağ tərəfə hizalama (sağ-sol istiqamətli mətn üçün standart olaraq)
center: mətni mərkəzdə hizalama
justify: mətni həm sol, həm də sağ sərhədlərə hizalama, sözlər arasına aralıq əlavə edərək mətnin bərabər paylanmasını təmin edir
start: mətnin başlanğıca (mətnin istiqamətindən asılı olaraq sol və ya sağ tərəfə) hizalanması
end: mətnin sona (mətnin istiqamətindən asılı olaraq sağ və ya sol tərəfə) hizalanması

İstifadə nümunəsi:

CSS

    
      .left {
        text-align: left;
      }

      .right {
        text-align: right;
      }

      .center {
        text-align: center;
      }

      .justify {
        text-align: justify;
      }

HTML

    
      <body>
        <p class="left">Bu mətn sol tərəfə hizalanıb.</p>
        <p class="right">Bu mətn sağ tərəfə hizalanıb.</p>
        <p class="center">Bu mətn mərkəzdədir.</p>
        <p class="justify">Bu mətn tam genişliyinə hizalanıb. Mətn konteynerin tam genişliyini əhatə edəcək şəkildə yayılacaq.</p>
      </body>

6.2 vertical-align xüsusiyyəti

vertical-align xüsusiyyəti elementi ana elementin əsas xəttinə görə şaquli hizalanması üçün cavabdehdir. Bu xüsusiyyət əsasən şəkillər, mətn sətrləri və ya cədvəllər kimi inline elementlərin mətn sətrinin və ya başqa konteynerin içində şaquli hizalanması üçün işlədilir.

Dəyərlər:

baseline: ana elementin əsas xəttinə hizalanma (default dəyər)
sub: subscript kimi hizalanma
super: superscript kimi hizalanma
text-top: ana elementin şriftinin yuxarısına görə hizalanma
text-bottom: ana elementin şriftinin altına görə hizalanma
middle: ana elementin ortasına görə hizalanma
top: konteynerin yuxarısına görə hizalanma
bottom: konteynerin altına görə hizalanma
Faiz dəyəri: elementi sətrin hündürlüyünə görə müəyyən edilmiş faiz qədər yerdəyişmə

İstifadə nümunəsi:

CSS

    
      .container {
        height: 100px;
        border: 1px solid #000;
      }

      .baseline {
        vertical-align: baseline;
      }

      .sub {
        vertical-align: sub;
      }

      .super {
        vertical-align: super;
      }

      .text-top {
        vertical-align: text-top;
      }

      .text-bottom {
        vertical-align: text-bottom;
      }

      .middle {
        vertical-align: middle;
      }

      .top {
        vertical-align: top;
      }

      .bottom {
        vertical-align: bottom;
      }

      .percent-50 {
        vertical-align: 50%;
      }

HTML

    
      <body>
        <div class="container">
          <span class="baseline">baseline</span>
          <span class="sub">sub</span>
          <span class="super">super</span>
          <span class="text-top">text-top</span>
          <span class="text-bottom">text-bottom</span>
          <span class="middle">middle</span>
          <span class="top">top</span>
          <span class="bottom">bottom</span>
          <span class="percent-50">50%</span>
        </div>
      </body>

Əvvəlki Əvvəlki dərs

Sonrakı Növbəti dərs

Şərhlər

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION