Текст HTML Center - Як 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

Для центрування тексту за допомогою float ми можемо використовувати 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
  • Відвідайте мій блог