Подредете нещата със свойството CSS Text Align

Подредете нещата със свойството CSS Text Align

Една от първите характеристики, за които всички разработчици научиха, когато се справяха с текстообработката, беше подравняването на текста. Този малък инструмент е от жизненоважно значение както за професионалните набирачи, така и за любителите дизайнери на летци. Не е изненадващо, че CSS има поддръжка за подравняване на текст, когато става въпрос за уеб дизайн.





The подравняване на текст property, заедно с един или два други, контролира как елемент хоризонтално подравнява своя текст. Отвъд основите, браузърите бавно прилагат повече от спецификациите, но пълната поддръжка варира. Научете как да подравните текста и кои функции поддържат обикновените браузъри днес.





Основите на свойството за подравняване на текста на CSS

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





Хоризонталното подравняване на текста се прилага само за контейнери с блокове. Това са елементи с пълна ширина, като абзаци и раздели. Използвайки подравняване на текст свойство на вграден елемент като напр в няма да има ефект. Можете също да подравните елементите на списъка и клетките в таблицата:

netflix се зарежда, но няма да играе

По подразбиране на език отляво надясно (повече за това по-късно) текстът се подравнява вляво:



В CSS това е същото като:

p { text-align: left; }

Или:





p { text-align: start; }

Свързани: Какво представляват каскадни стилови таблици и за какво се използва CSS?

Можете да използвате други стойности за подравняване на текст свойство за промяна на хоризонталното подравняване. Най -често срещаните стойности са познати от приложенията за текстообработка:





text-align: left
text-align: center
text-align: right

Използвайте Обосновка за подравняване на ляв и десен ръб

Друга обща стойност за подравняване на текст е оправдавам . Браузърите добавят място към оправдания текст, така че всеки ред да се разширява, за да запълни наличното пространство:

Когато оправдаете текста, последният ред може да бъде труден. Тъй като може да е много кратък (вероятно само една дума), разпределението му по цялата ширина може да бъде грозно. По подразбиране дори оправданият текст ще подравнява последния ред вляво.

как да направя моя лаптоп по -бърз windows 10

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

The оправдавам всичко стойност трябва да означава, че браузърите третират крайния ред като всички останали и го разтягат до пълната ширина. По време на писането обаче нито един браузър не поддържа тази стойност. Можеш проверете канюса, за да видите дали го правят когато четете тази статия.

Друго свойство на CSS, text-align-last , е по -гъвкав и има по -добра поддръжка. Можете да го лекувате горе -долу по същия начин като подравняване на текст , но се отнася само за последния ред:

Поддръжката на браузъра за това свойство е по -добра, но не перфектна. Отново, проверете канюса, преди да го използвате . Ако браузърът не разпознава това свойство, той ще го игнорира.

Подравняване на текста и посока на четене

Може да работите с език, като арабски или иврит, който чете отдясно наляво. CSS използва посока свойство, за да посочите това, например:

direction: rtl;

Тези езици обикновено подравняват текста вдясно по подразбиране.

Вместо да се налага да уточнявате наляво / надясно , предпочитаният начин за подравняване на текст използва стойностите започнете и край . Това определя дали текстът трябва да се подреди в началото на всеки ред или в края. На езици отляво надясно, започнете е еквивалентно на наляво . На език отдясно наляво текстът започва отдясно и завършва вляво.

как да преместите страница в word

Използвайки започнете или край означава, че независимо от посоката на текста, подравняването е последователно.

Как елементите наследяват свойството за подравняване на текст

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

Използване на свойството за подравняване на текста за управление на оформлението

Можете да използвате подравняване на текст CSS свойство за определяне на начина, по който браузърите излагат текст хоризонтално. Най -често срещаните ценности са наляво , надясно , център , и оправдавам . Те обаче са доста ясни оправдавам въвежда известна сложност.

Трябва да използвате умерено подравняване на текста. На билбордове и плакати централното подравняване може да е подходящо, но може да направи по -дългите текстови блокове трудни за четене. Обосновката обикновено е по -четима, когато текстовите редове са по -дълги. Оправдаването на кратки колони с текст може да създаде грозни интервали.

The подравняване на текст property е едно от многото CSS свойства, които осигуряват полезно форматиране и основно позициониране.

Дял Дял Туит електронна поща 10 прости примера за CSS код, които можете да научите за 10 минути

Нуждаете се от помощ с CSS? Опитайте тези основни примери за CSS код, за да започнете, след което ги приложите към собствените си уеб страници.

Прочетете Напред
Свързани теми
  • Програмиране
  • Уеб разработка
  • Уеб дизайн
  • CSS
За автора Боби Джак(58 статии са публикувани)

Боби е ентусиаст на технологиите, който работи като софтуерен разработчик в продължение на почти две десетилетия. Той е запален по игрите, работи като редактор на рецензии в Switch Player Magazine и е потопен във всички аспекти на онлайн издателството и уеб разработката.

Още от Боби Джак

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате