В света на HTML и CSS всичко е свързано със структурата на оформлението и разпределението на елементите. Обикновено използваме HTML, за да дефинираме маркировката и структурата, докато CSS ни помага да се справим със стилизирането и подравняването на елементи.
В тази публикация ще научим малко за различните начини, по които можем да центрираме HTML елементи и да се справим с вертикалното подравняване с CSS.
Първо ще научим как да подравним текста с CSS.
След това ще разгледаме как да подравним div и всички други елементи.
И накрая ще научим как можем да съберем текст и а div
в контейнер.
Как да центрирате текста
Има много начини за центриране на текст с помощта на CSS.
Използване на свойството Float
Float е лесен начин за подравняване на текста.
За да поставим текста от дясната страна на оформлението, можем просто да използваме right
като стойност за float
.
За да поставим текста от лявата страна, използваме left
, като float:left
. Вижте примера по-долу:
.right { float: right; } .left { float: left; } // HTML Right Left
За да центрираме текста с помощта на плувка, можем да използваме margin-left
или margin-right
и да го направим 50%
, както по-долу.
.center { float: left; margin-left: 50%; } /* HTML*/ Center
Можете да научите повече за употребите на Float
тук.
Използване на подравняване на текст
text-align
е по-удобен и по-специфичен начин за подравняване на текста. Позволява ни да поставим текста от center
или към left
или right
отстрани, както показва следният пример:
.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ Right
Center
Left
Научете повече за text-align
.
Как да подравните a div
Е, има много начини да направите това.
По същия начин, по който използваме Float
за подравняване на текст, можем да го използваме и за подравняване на div
елемент.
Float
върши работата, но CSS ни дава по-добри опции, които са по-удобни и елегантни. Чували ли сте за Flexbox
? Или css-мрежа?
Е, тези два метода осигуряват много модерни начини за подравняване и работа с оформлението ви в CSS. Нека разгледаме Flexbox по-подробно.
Flexbox
Flexbox предлага лесен и ясен начин за подравняване на div
- и досега е любимият ми метод за обработка на оформления в CSS (използвам го всеки ден).
Нека да разгледаме какво бихме направили, за Flexbox
да видим как работи, като пресъздадем същия пример като по-горе.
Примерът:
Кодът:
Flexbox .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div
нека го разбием
- Винаги определяме
div
родител, който използваdisplay:flex
да кандидатстваFlexbox
. Така че правим всички деца на div в родителя даdiv
могат да бъдат обработвани с помощта наFlexbox
свойства. - Най
flex-direction
използваrow
посока по подразбиране, което означава, че елементите се поставя вертикално в контейнера. - Със
justify-content
свойството можем да подравнимdiv
децата (ите) в различни посоки, като следния пример:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
justify-content:center
поставя елементите в центъра на контейнера.justify-content:flex-start
поставя елементите в началото на контейнера вляво.justify-content:flex-end
поставя елементи в края на контейнера от дясната страна.justify-content:space-around
прави елементите да се поберат в контейнера и поставя еднаква празнина между всички елементи.justify-content:space-evenly
разпределя елементите в родителския контейнер еднакво със същото пространство и еднаква ширина.
Горният пример се отнася за децата на всички елементи като група.
Представете си, ако искаме да подравним единица div
вътре в контейнера. Винаги можем да използваме align-self
за подравняване на един елемент.
.container div{ align-self:center /* can have: flex-start, or flex-end*/ }
Можем да приложим едно и също нещо към текст Flexbox
като в следния пример:
.right{ display: flex; align-items: flex-end; flex-direction: column; } right div
Това е страхотен туит от Джулия Еванс, който илюстрира центрирането в CSS като цяло:

Увийте
Има много начини за центриране на елементи в CSS. И винаги ще научавате нови неща с течение на времето, докато практикувате все повече и повече.
Затова ви препоръчвам да работите с някои примери от наученото днес, така че да остане.
- Трябва ли да ме следвате Twitter?
- Вижте My Github
- Посетете моя блог