Как да подравните хоризонтално и вертикално с помощта на CSS?

Това ръководство демонстрира процедурата за хоризонтално и вертикално подравняване с помощта на CSS.

• Хоризонтално подравняване
• Вертикално подравняване

Как да подравните хоризонтално и вертикално с помощта на CSS?

Разработчиците използват „хоризонталното“ и „вертикалното“ подравняване, за да подредят и позиционират елементите на уеб страница по по-организиран начин. Те могат да бъдат полезни при подравняване на елементи и съдържание, позициониране на бутони или икони и т.н. Следвайте примерите по-долу за по-добро разбиране:

Хоризонтално подравняване

В CSS свойството text-align се използва за хоризонтално подравняване на текст в неговия родителски елемент. Посетете кодовите фрагменти по-долу за по-добро разбиране:

В горния кодов фрагмент:

• Първо, родителят „ див ” елементът се използва с атрибут на клас със стойност „ сметка ”.
• След това са създадени три дъщерни елемента и атрибутът class е присвоен на всеки div.
• В крайна сметка стойностите на “leftAlign”, “centerAlign” и “rightAlign” се предоставят на класовете.

Сега вмъкнете следните CSS свойства в „ <стил> ” етикет:

В горния кодов блок:

• Първо, всичките три класа се избират поотделно и след това се прилагат CSS свойства ' дисплей ”, “ ширина ”, “ Цвят на фона ' и ' подплата ' на тях. Тези свойства се използват за подобряване на целите на визуализацията.
• След това стойностите на „ наляво ”, “ център ' и ' точно “ се предоставят на „ подравняване на текст ” собственост към „ ляво подравняване ”, “ centerAlign ', и ' дясно подравняване ” класове, съответно.

След процеса на компилиране HTML елементите изглеждат така:

Горната моментна снимка на браузъра показва, че елементите са хоризонтално подравнени в ляво, централно и дясно положение.

Вертикално подравняване

CSS “ вертикално подравняване ” подравнява избрания елемент спрямо „ у-ос ” в техния родителски елемент. Възможните стойности за свойството „vertical-align“ са „ базова линия ”, “ суб ”, “ супер ”, “ Горна част ”, “ текст-отгоре ”, “ средата ”, “ отдолу ', и ' текст-отдолу ”. Въпреки това, разработчиците използват най-вече стойности „горни“, „средни“ и „долни“, докато създават дизайн на уеб страници. За да подравните избрания HTML елемент в горната позиция, посетете кодовия фрагмент по-долу:

В горния кодов фрагмент:

• Първо създайте родител ' див ” елемент и присвоете стойност „ броя ' към ' клас ' атрибут.
• Вътре в родителския контейнер използвайте „ ” и предоставете пътя на изображението като стойност на „ src ' атрибут.
• Освен това посочете стойността на „ 200 пиксела ” и на двете ширина ' и ' височина ” атрибути на „ ” таг.
• След това използвайте „ ” и му предоставете клас от „ captionTopAlign ”. В крайна сметка му предоставете фиктивни данни.

Сега добавете CSS свойства, за да стилизирате HTML елементите:

В горния кодов блок:

• Първо изберете родителя „ броя ” и осигурете стойностите на „fit-content”, „block”, „100px”, „10px” и „2px solid red” на CSS „ ширина ”, “ дисплей ”, “ margin-left ”, “ подплата ' и ' граница ' Имоти. Тези свойства се използват за стилизиране на родителския елемент.
• След това изберете „ captionTopAlign ” и осигурете стойността на „ Горна част „към CSS“ вертикално подравняване ' Имот. Това прави HTML елемента подравнен към горната позиция.

След изпълнението на горните редове код, уеб страницата изглежда така:

Горната снимка показва, че избраният HTML елемент вече е подравнен отгоре. По същия начин елементът може да бъде подравнен в средна, долна посока и т.н.

Заключение

За хоризонтално и вертикално подравняване, „ подравняване на текст ' и ' вертикално подравняване ” CSS свойствата се използват съответно. Свойството „text-align“ позволява стойността на „ наляво ”, “ точно ”, “ център ' и ' оправдавам ”. От друга страна, възможните стойности за свойството „vertical-align“ са „ базова линия ”, “ суб ”, “ супер ”, “ Горна част ”, “ текст-отгоре ”, “ средата ”, “ отдолу ', и ' текст-отдолу ”. Хоризонталното и вертикалното подравняване помага за създаване на чист и професионален уеб дизайн.