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

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

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

Рядково-блочні елементи можна вирівнювати так само, як і звичайні рядкові елементи.

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

<div class="parent">
  <span class="child">text</span>
</div>

.parent {
  text-align: right;
  padding: 10px 0;
  border: 1px solid red;
}

.child {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid green;
}

❗ Важливо:

text-align впливає на розташування inline та inline-block елементів усередині батьківського елемента.

display: inline-block дозволяє задати розміри елементу.
text-align: right вирівнює елемент по правому краю.
Відступи можна додавати через padding батька або margin дочірнього елемента.

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

📌 Завдання:

№1. Дан div усередині батьківського елемента:
<div class="child">text</div>
Перетворіть дочірній div у рядково-блочний елемент і вирівняйте його по правому краю батька.

💡 Показати підказку

Використайте display: inline-block для дочірнього елемента та text-align: right для батьківського.

✅ Показати відповідь

.parent {
  padding: 10px 0;
  border: 1px solid red;
  text-align: right;
}

.child {
  display: inline-block;
  padding: 10px;
  border: 1px solid green;
}

📌 Завдання:

№2. Зробіть так, щоб елемент не притискався до правого краю.
Додайте правий padding батьківському елементу.

.parent {
  padding: 10px 20px 10px 0;
  text-align: right;
}

📌 Завдання:

№3. Змініть попередню задачу.
Додайте правий margin дочірньому елементу замість padding батька.

.child {
  display: inline-block;
  margin-right: 20px;
}

📌 Завдання:

№4. Данo посилання всередині батьківського елемента:
<a href="" class="child">text</a>
Перетворіть посилання у рядково-блочний елемент і вирівняйте його по правому краю.

💡 Показати підказку

Посилання за замовчуванням є рядковим елементом, тому для width і padding краще використати inline-block.

✅ Показати відповідь

.parent {
  text-align: right;
}

.child {
  display: inline-block;
  width: 100px;
  padding: 10px;
  border: 1px solid green;
}

📌 Завдання:

№5. Змініть попередню задачу так, щоб текст усередині посилання був вирівняний по центру.

✅ Показати відповідь

.child {
  display: inline-block;
  width: 100px;
  padding: 10px;
  border: 1px solid green;
  text-align: center;
}