Для одного div, що містить текст для центрування, ви можете перетворити його на макет сітки з одним рядком і одним стовпцем. У макеті сітки, властивість align-items визначає вирівнювання вмісту в клітинці вздовж осі стовпця (вертикальної). Це вертикально вирівнює ваш текст у елементі div.
Вирівняти текст у комірці
- Виділіть комірки з потрібним вирівняним текстом.
- На вкладці «Головна» виберіть один із наведених нижче параметрів вирівнювання.
- Щоб вирівняти текст по вертикалі, виберіть «Вирівнювання по верхньому краю», «Вирівнювання посередині» або «Вирівнювання по нижньому краю».
- Щоб вирівняти текст по горизонталі, виберіть «Вирівняти текст за лівим краєм», «За центром» або «Вирівняти текст за правим краєм».
Щоб відцентрувати текст у CSS, скористайтеся властивістю вирівнювання тексту та визначте її значенням «center». ' Ви можете використовувати цю техніку всередині блокових елементів, таких як div. Ви також можете відцентрувати текст у HTML, що корисно, якщо ви хочете відцентрувати лише окремі елементи на сторінці в кожному окремому випадку.
Щоб рядок був видимим на веб-сторінці, потрібно також встановити ширину, стиль і колір рамки.
- Створіть div. Спочатку створіть контейнер для появи рядка − …
- Створіть лінію. Щоб лінія з’явилася, використовуйте властивість border-left − …
- Створіть вертикальну лінію. …
- Створіть вертикальну лінію по центру.
Використання line-height і vertical-align Ця техніка вирівнює текст по центру контейнера, що ідеально підходить для однорядкового тексту. Приклад: у цьому прикладі ми центруємо текст «GeeksforGeeks» по горизонталі та вертикалі, використовуючи line-height у div та vertical-align: middle у діапазоні з пунктирною рамкою для стилізації.