Урок 155 із 239
65%
← Назад

Вирівнювання рядкових елементів по правому краю в CSS

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

Вирівнювання рядкових елементів по правому краю в CSS

Для вирівнювання рядкових елементів по правому краю використовується властивість text-align зі значенням right.

Як і при центруванні, властивість text-align потрібно задавати батьківському елементу.

<div class="parent">
  <span class="child">text</span>
</div>
.parent {
  text-align: right;
  padding: 10px 0;
  border: 1px solid red;
}

.child {
  border: 1px solid green;
}
❗ Важливо:

text-align: right вирівнює текст і всі рядкові елементи всередині батьківського елемента.

  • text-align: left — вирівнювання ліворуч.
  • text-align: center — вирівнювання по центру.
  • text-align: right — вирівнювання праворуч.
  • Властивість задається батьківському елементу.

Практичні завдання

📌 Завдання:
  1. №1. Дан div із посиланням:
  2. <a href="">посилання</a>
  3. Розташуйте це посилання по правому краю div.
<div class="parent">
  <a href="">посилання</a>
</div>
.parent {
  padding: 10px 0;
  border: 1px solid red;
}
💡 Показати підказку

Додайте text-align: right до батьківського елемента.

✅ Показати відповідь
.parent {
  padding: 10px 0;
  border: 1px solid red;
  text-align: right;
}
📌 Завдання:
  1. №2. Змініть попередню задачу так, щоб посилання не притискалося до правого краю.
  2. Додайте батьківському елементу правий padding.
.parent {
  padding: 10px 20px 10px 0;
  border: 1px solid red;
  text-align: right;
}
❗ Важливо:

Padding створює внутрішній відступ і дозволяє залишити простір між елементом та межею батьківського блока.