Використання властивості line-height це найпростіший і найчастіше використовуваний підхід для вертикального вирівнювання тексту всередині div. Властивість line-height встановлює висоту рамки рядка, яка є областю, яка містить текст. Установивши висоту рядка рівною висоті контейнера, ми можемо відцентрувати текст по вертикалі.24 червня 2024 р.
Щоб вертикально відцентрувати <p> у div із фіксованою висотою, ви можете використовувати CSS flexbox або макет сітки. Застосувати дисплей: flex; до контейнера div і використовуйте align-items: center; justify-content: центр; для flexbox. Як варіант, із сіткою, установіть відображення: сітка; і використовуйте align-items: center; вирівняти елементи: центр;.
Примітка: Застосування text-align :center до елемента <div> або <p> центрує вміст цих елементів, залишаючи їхні загальні розміри незмінними.
Ось як:
- Надайте div CSS-клас, як центр.
- У своєму коді CSS введіть селектор .centerCSS і розкрийте дужки стилю.
- Установіть позицію вашого div як абсолютну, щоб її вилучити зі звичайного документообігу.
- Встановіть властивість top на 50%. …
- Потім встановіть для властивості transform значення translate(0, -50%).
Для поля всіх елементів встановлено значення 0, щоб видалити стандартне поле для таких елементів, як тег <p>, яке впливає на центрування тексту по вертикалі за допомогою цього методу. ми перемістіть текстовий елемент на 50% від верхньої частини елемента контейнера. Це робить верхню частину тексту вертикально по центру контейнера.
Для цього встановіть для властивості display значення «flex». Потім встановіть властивості align-items і justify-content на «центр». Це вказує браузеру вертикально та горизонтально центрувати елемент flex (div у div).