Выровнять текст по вертикали css: Как выровнять текст по вертикали css

Leave a Comment / Css / By /

Как вертикально выровнять текст внутри flexbox с помощью CSS?

Улучшить статью

Сохранить статью

  • Уровень сложности: Easy
  • Последнее обновление: 12 апр, 2019

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    CSS flexbox: Свойство flex в CSS представляет собой комбинацию свойств flex-grow, flex-shrink и flex-basis. Он используется для установки длины гибких элементов. Свойство flex очень отзывчиво и удобно для мобильных устройств. Легко позиционировать дочерние элементы и основной контейнер. Поля не схлопываются с полями содержимого. Порядок любого элемента можно легко изменить без редактирования раздела HTML. Флексбокс был добавлен в стандарты CSS несколько лет назад для управления распределением пространства и выравниванием элементов. В основном это одномерный синтаксис макета.

    Вертикальное выравнивание по центру: Свойство flexbox используется для установки вертикального выравнивания содержимого.

    Текстовое содержимое можно выровнять по вертикали, установив следующие свойства отображения:

    • align-items
    • justify-content
    • flex-direction

    align-items и justify-content — важные свойства для абсолютного центрирования текста по горизонтали и вертикально. Центрирование по горизонтали управляется свойством justify-content, а центрированием по вертикали — свойством align-items.

    Пример 1: В этом примере текстовое содержимое выровнено по центру по вертикали.

    < html >

       

    < head >

         < title >

             Выровнять текст по вертикали

         title >

           

        

            

         < style >

             . GFG {

                 дисплей: гибкий;

                 align-items: center;

                 по ширине: по центру;

                 flex-direction: столбец;

                 ширина: 100%;

                 text-align: center;

                 min-height: 400 пикселей;

                 цвет фона: зеленый;

                 align-items: center;

    }

         style >

    head >

       

    < body >

         < Div Класс = "GFG" >

    < H2 > Geeksforgeeks . 0050 h2 >

             < h3 >Vertically align text using Flexbox h3 >

         div

    >

    Body >

    HTML >

    :

    :

    :

    :

    :

    .0024

    Пример 2: В этом примере показано, как с помощью CSS установить вертикальное выравнивание текста по левому краю во флексбоксе.

    < html >

       

    < head >

         < title >

             Vertically align text content

         title >

           

        

            

         < style >

             .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *