Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Вирівнювання тексту

Вирівнювання тексту

Frontend SELF UA
Рівень 15 , Лекція 1
Відкрита

6.1 Властивість text-align

Вирівнювання тексту — це практично найважливіший аспект стилізації веб-сторінок, який дозволяє контролювати, як текст розташовується в контейнерах. CSS надає два основних властивості для вирівнювання тексту: text-align і vertical-align. Ці властивості дозволяють керувати горизонтальним і вертикальним вирівнюванням тексту відповідно.

Властивість text-align керує горизонтальним вирівнюванням тексту всередині елемента блоку. Воно визначає, як текст вирівнюється відносно меж елемента.

Значення

  • left: вирівнювання тексту по лівому краю (за замовчуванням для тексту зліва направо)
  • right: вирівнювання тексту по правому краю (за замовчуванням для тексту справа наліво)
  • center: центрування тексту
  • justify: вирівнювання тексту по лівому та правому краях, додаючи прогалини між словами для рівномірного розподілу тексту по всій ширині контейнера
  • start: вирівнювання тексту за початком (лівим або правим краєм залежно від напрямку тексту)
  • end: вирівнювання тексту за кінцем (правим або лівим краєм залежно від напрямку тексту)
Java-університет

Приклад використання:

CSS 
    
      .left {
        text-align: left;
      }

      .right {
        text-align: right;
      }

      .center {
        text-align: center;
      }

      .justify {
        text-align: justify;
      }
HTML 
    
      <body>
        <p class="left">Цей текст вирівняний по лівому краю.</p>
        <p class="right">Цей текст вирівняний по правому краю.</p>
        <p class="center">Цей текст центрований.</p>
        <p class="justify">Цей текст вирівняний по ширині. Він буде розтягнутий так, щоб текст займав всю ширину контейнера.</p>
      </body>

6.2 Властивість vertical-align

Властивість vertical-align керує вертикальним вирівнюванням елемента по базовій лінії його батька. Воно найчастіше використовується для вирівнювання вбудованих елементів, таких як зображення, рядки тексту або таблиці, по вертикалі в рядку тексту або іншому контейнері.

Значення:

  • baseline: вирівнювання по базовій лінії батька (значення за замовчуванням)
  • sub: вирівнювання як підрядковий індекс
  • super: вирівнювання як надрядковий індекс
  • text-top: вирівнювання по верху шрифту батька
  • text-bottom: вирівнювання по низу шрифту батька
  • middle: вирівнювання по середині батька
  • top: вирівнювання по верху контейнера
  • bottom: вирівнювання по низу контейнера
  • Процентне значення: зміщення елемента на вказаний відсоток відносно висоти рядка

Приклад використання:

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>
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ