CodeGym /Kursy /Frontend SELF PL /Wyrównanie tekstu

Wyrównanie tekstu

Frontend SELF PL

Poziom 15 , Lekcja 1

Dostępny

6.1 Właściwość text-align

Wyrównanie tekstu to prawie najważniejszy aspekt stylizacji stron internetowych, który pozwala kontrolować, jak tekst jest rozmieszczony w kontenerach. CSS zapewnia dwie główne właściwości do wyrównania tekstu: text-align i vertical-align. Te właściwości pozwalają zarządzać wyrównaniem tekstu poziomo i pionowo.

Właściwość text-align zarządza poziomym wyrównaniem tekstu wewnątrz elementu blokowego. Określa, jak tekst jest wyrównany w stosunku do krawędzi elementu.

Wartości

left: wyrównanie tekstu do lewej krawędzi (domyślnie dla tekstu od lewej do prawej)
right: wyrównanie tekstu do prawej krawędzi (domyślnie dla tekstu od prawej do lewej)
center: centrowanie tekstu
justify: wyrównanie tekstu do lewej i prawej krawędzi, dodając spacje między słowami, aby równomiernie rozmieścić tekst na całej szerokości kontenera
start: wyrównanie tekstu do początku (lewej lub prawej krawędzi w zależności od kierunku tekstu)
end: wyrównanie tekstu do końca (prawej lub lewej krawędzi w zależności od kierunku tekstu)

Przykład użycia:

CSS

    
      .left {
        text-align: left;
      }

      .right {
        text-align: right;
      }

      .center {
        text-align: center;
      }

      .justify {
        text-align: justify;
      }

HTML

    
      <body>
        <p class="left">Ten tekst jest wyrównany do lewej krawędzi.</p>
        <p class="right">Ten tekst jest wyrównany do prawej krawędzi.</p>
        <p class="center">Ten tekst jest wycentrowany.</p>
        <p class="justify">Ten tekst jest wyrównany do szerokości. Zostanie rozciągnięty tak, aby zajmował całą szerokość kontenera.</p>
      </body>

6.2 Właściwość vertical-align

Właściwość vertical-align zarządza pionowym wyrównaniem elementu względem linii bazowej jego rodzica. Najczęściej używana jest do wyrównania elementów wbudowanych, takich jak obrazy, linie tekstu czy tabele, w pionie w linii tekstu lub innym kontenerze.

Wartości:

baseline: wyrównanie względem linii bazowej rodzica (wartość domyślna)
sub: wyrównanie jako indeks dolny
super: wyrównanie jako indeks górny
text-top: wyrównanie do góry czcionki rodzica
text-bottom: wyrównanie do dołu czcionki rodzica
middle: wyrównanie do środka rodzica
top: wyrównanie do góry kontenera
bottom: wyrównanie do dołu kontenera
Wartość procentowa: przesunięcie elementu o określony procent względem wysokości linii

Przykład użycia:

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>

Poprzednia Poprzednia lekcja

Następny Następna lekcja

Komentarze

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