Тази статия демонстрира как да подравнявате вертикално текст във flexbox:
Метод 1: Използване на свойството 'align-item'.
За вертикално подравняване на текст потребителите могат да използват „ подравняване на елемент ” собственост, предоставена от CSS. Помага на елементите да зададат подравняването си във flexbox. Възможните позиции за вертикално подравняване могат да бъдат на „ Горна част ”, средата ', или ' отдолу ” страна.
Практическите демонстрации за подравняване на елементи в тези посоки са посочени по-долу:
Пример 1: Горна позиция
За да подравните текста вътре в flexbox в горна позиция, „ гъвкав старт ” се предоставя стойност на „ подравняване на елементи ' Имот. Това свойство е присвоено на главния div, който ще се показва като flex. Да приемем, че div с клас от „ вертикален ” се създава в HTML файла. След това в CSS файла изберете този клас и задайте следните свойства:
.вертикален {
цвят : бяло ;
височина : 150 пиксела ;
дисплей : flex ;
padding-left : 20px ;
подравняване на елементи : гъвкав старт ;
Цвят на фона : горскозелен ;
}
- Първо, основният стил и подравняването се дават на div с помощта на свойствата цвят, цвят на фона и височина на CSS.
- Свойството “display” също е настроено на “flex”, за да го направи flexbox.
- И накрая, за да покажете текста в началото на flexbox, задайте свойството „align-items“ на „flex-start.
След изпълнение на горния код, уеб страницата изглежда така:
Изходът показва, че текстът вече е подравнен в най-горната позиция във flexbox.
Пример 2: Средна позиция
За вертикално подравняване на текста в средната позиция, задайте „ център „стойност към CSS“ подравняване на елементи ' Имот:
.вертикален {цвят : бяло ;
височина : 150 пиксела ;
дисплей : flex ;
padding-left : 20px ;
подравняване на елементи : център ;
Цвят на фона : горскозелен ;
}
След изпълнението на горния код:
Горният изход показва, че текстът вече е подравнен в центъра на flexbox.
Пример 3: Долна позиция
За да зададете текста в долната част на flexbox, задайте „ гъвкав край ” стойност на „ подравняване на елементи ' Имот. Този път текстът се подравнява в позицията, където flexbox завършва, означава от долната страна:
.вертикален {цвят : бяло ;
височина : 150 пиксела ;
дисплей : flex ;
padding-left : 20px ;
подравняване на елементи : гъвкав край ;
Цвят на фона : горскозелен ;
}
След изпълнение на горния код, уеб страницата изглежда така:
Горният изход показва, че текстът вече е вертикално подравнен в най-долната позиция.
Метод 2: Използване на свойството „justify-content“.
„ justify-content ” може също да се използва за вертикално подравняване на текста във flexbox. Той обаче работи по същия начин като „ подравняване на текст ” и то подравнява елементите в посоката на реда. Така че, за да промените посоката на подравняване, „ flex-direction ” се използва за задаване на „ justify-content ' подравняване към ' колона ' посока:
.вертикален {височина : 150 пиксела ;
дисплей : flex ;
padding-left : 20px ;
цвят : бяло ;
Цвят на фона : тъмноциан ;
flex-direction : колона ;
justify-content : гъвкав край ;
}
Обяснението на горния код е дадено по-долу:
- „ височина ”, “ цвят ' и ' padding-left ” свойствата работят точно като горния метод.
- След това задайте „ колона ” стойност на „ flex-direction ” на flexbox за прилагане на стилове през колони.
- След това „ justify-content ” подравнява текста вертикално.
- В крайна сметка „ гъвкав край ” стойност подравнява елемента върху „ отдолу ” страна.
Забележка : Потребителите могат също да задават „ гъвкав старт ' и ' център ” стойности към „ Горна част ', и ' средата ” страни, съответно.
Например след изпълнение на горния код уеб страницата изглежда така:
Горният изход показва, че текстът е подравнен в долната част на flexbox.
Заключение
За вертикално подравняване на текста във flexbox, „ подравняване на елементи ' и ' justify-content ” Могат да се използват свойствата на CSS. И двете свойства получават „ гъвкав старт ”, “ център ' или ' гъвкав край ” стойности за подравняване на текста в „ Горна част ”, “ средата ' и ' отдолу ” посоки вътре във flexbox, съответно. Тази статия демонстрира вертикалното подравняване на текст във flexbox.