HTML Center Text - Как да CSS вертикално подравняване на Div

В света на 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
  • Посетете моя блог