Типография
Утилиты для управления выравниванием текста.
| Class | Styles |
|---|---|
text-left | text-align: left; |
text-center | text-align: center; |
text-right | text-align: right; |
text-justify | text-align: justify; |
text-start | text-align: start; |
text-end | text-align: end; |
Используйте утилиту text-left для выравнивания текста элемента по левому краю:
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
<p class="text-left">Так я начал заходить в воду...</p>Используйте утилиту text-right для выравнивания текста элемента по правому краю:
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
<p class="text-right">Так я начал заходить в воду...</p>Используйте утилиту text-center для центрирования текста элемента:
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
<p class="text-center">Так я начал заходить в воду...</p>Используйте утилиту text-justify для выравнивания текста элемента по ширине:
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
<p class="text-justify">Так я начал заходить в воду...</p>Префикс a text-align утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<p class="text-left md:text-center ..."> Lorem ipsum dolor sit amet...</p>Подробнее об использовании вариантов читайте в документации по вариантам.