Почему не работает text align

text-align

text-align CSS-свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. text-align не контролирует выравнивание элементов самого блока, но только их линейное содержимое.

Начальное значение	start , или неназванное значение, которое действует как left , если direction : ltr или как right , если direction : rtl , а если start не поддерживается браузером.
Применяется к	блочные контейнеры
Наследуется	да
Обработка значения	как указано, кроме значения match-parent , которое вычисляется вместо значения его родителя direction , а результаты в вычисленном значении left или right
Animation type	discrete

Синтаксис

text-align =
start | (en-US)
end | (en-US)
left | (en-US)
right | (en-US)
center | (en-US)
justify | (en-US)
match-parent | (en-US)
justify-all

text-align: left text-align: right text-align: center text-align: justify text-align: start text-align: end text-align: match-parent text-align: start end text-align: "." text-align: start "." text-align: "." end text-align: inherit 

Значения

start Экспериментальная возможность

Подобно left если направление слева направо, и right если наоборот.

Подобно right если направление слева направо, и left если наоборот.

Линейное содержимое выравнивается по левому краю линейного блока.

Линейное содержимое выравнивается по правому краю линейного блока.

Линейное содержимое центрируется в линейном блоке.

Первое появление односимвольной строки — это элемент используемый для выравнивания. Ключевое слово, следует или предшествует, и определяет, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.

Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.

Наподобие inherit с различием, что значение start и end вычисляются в соответствии direction и заменяются соответствующим left или right значением.

Почему-то не работает align=«justify»

Почему-то текст выглядит так же, как если бы был «left», при этом «right» и «center» работают, как и ожидалось.

Что я делаю не так?

Vsevolod-linuxoid ★★★★★
16.05.18 14:28:59 MSK

Вместо «1 2 3» ведь гораздо больше текста? Больше 1 строки? В разных браузерах пробовал?

fbiagent ★★★
( 16.05.18 14:44:08 MSK )
Ответ на: комментарий от fbiagent 16.05.18 14:44:08 MSK

Да, в разных. Нигде не работает.

И да, текста больше — это как пример.

Vsevolod-linuxoid ★★★★★
( 16.05.18 14:47:28 MSK ) автор топика
Ответ на: комментарий от Vsevolod-linuxoid 16.05.18 14:47:28 MSK

FF 60, все работает

karmich ★
( 16.05.18 14:53:31 MSK )
Ответ на: комментарий от Vsevolod-linuxoid 16.05.18 14:47:28 MSK

А style=«text-align:justify» работает?

ddidwyll ★★★★
( 16.05.18 14:56:41 MSK )
Ответ на: комментарий от ddidwyll 16.05.18 14:56:41 MSK

Vsevolod-linuxoid ★★★★★
( 16.05.18 14:59:04 MSK ) автор топика
Ответ на: комментарий от Vsevolod-linuxoid 16.05.18 14:47:28 MSK

Закрывающий тег html поправить ))

fbiagent ★★★
( 16.05.18 14:59:15 MSK )
Ответ на: комментарий от karmich 16.05.18 14:53:31 MSK

Есть и другие браузеры, к сожалению.

Vsevolod-linuxoid ★★★★★
( 16.05.18 14:59:28 MSK ) автор топика
Ответ на: комментарий от Vsevolod-linuxoid 16.05.18 14:59:04 MSK

Выложи куда-то полностью пример, у меня в хромиуме работает.

ddidwyll ★★★★
( 16.05.18 15:01:26 MSK )
Ответ на: комментарий от fbiagent 16.05.18 14:59:15 MSK

Исправил, но не помогло.

Vsevolod-linuxoid ★★★★★
( 16.05.18 15:01:39 MSK ) автор топика
Ответ на: комментарий от Vsevolod-linuxoid 16.05.18 14:59:28 MSK

Chromium 66.0.3359.139, так же никаких проблем.

karmich ★
( 16.05.18 15:03:00 MSK )
Ответ на: комментарий от ddidwyll 16.05.18 15:01:26 MSK

   
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit doloremque explicabo, autem quisquam officia eum ducimus odio voluptate, quam quae quos alias debitis? Ullam praesentium, nihil, perspiciatis aspernatur distinctio assumenda! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit doloremque explicabo, autem quisquam officia eum ducimus odio voluptate, quam quae quos alias debitis? Ullam praesentium, nihil, perspiciatis aspernatur distinctio assumenda!
  

Не работает в Chromium.

Vsevolod-linuxoid ★★★★★
( 16.05.18 15:04:01 MSK ) автор топика
Ответ на: комментарий от karmich 16.05.18 15:03:00 MSK

Выложи свой пример целиком, пожалуйста.

Vsevolod-linuxoid ★★★★★
( 16.05.18 15:04:39 MSK ) автор топика
Ответ на: комментарий от Vsevolod-linuxoid 16.05.18 15:04:39 MSK

Да все как у тебя, один в один.

   
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse libero vitae nihil dignissimos vero ad eveniet earum debitis voluptatem ipsam minima, voluptatibus nam, harum temporibus velit nobis deleniti itaque omnis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse libero vitae nihil dignissimos vero ad eveniet earum debitis voluptatem ipsam minima, voluptatibus nam, harum temporibus velit nobis deleniti itaque omnis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse libero vitae nihil dignissimos vero ad eveniet earum debitis voluptatem ipsam minima, voluptatibus nam, harum temporibus velit nobis deleniti itaque omnis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse libero vitae nihil dignissimos vero ad eveniet earum debitis voluptatem ipsam minima, voluptatibus nam, harum temporibus velit nobis deleniti itaque omnis!
   

karmich ★
( 16.05.18 15:05:48 MSK )
Ответ на: комментарий от Vsevolod-linuxoid 16.05.18 15:01:39 MSK

align Not supported in HTML 5. Specifies the alignment according to surrounding elements. Use CSS instead 

fbiagent ★★★
( 16.05.18 15:08:12 MSK )
Ответ на: комментарий от Vsevolod-linuxoid 16.05.18 15:04:39 MSK

ddidwyll ★★★★
( 16.05.18 15:08:21 MSK )
Последнее исправление: ddidwyll 16.05.18 15:11:33 MSK (всего исправлений: 1)

Ответ на: комментарий от fbiagent 16.05.18 15:08:12 MSK

Как указать использование именно html 4?

Vsevolod-linuxoid ★★★★★
( 16.05.18 15:09:56 MSK ) автор топика
Последнее исправление: Vsevolod-linuxoid 16.05.18 15:10:04 MSK (всего исправлений: 1)

Ответ на: комментарий от karmich 16.05.18 15:05:48 MSK

У меня именно это почему-то не пашет: https://imgur.com/jP0E8Wf

Cast ddidwyll

Vsevolod-linuxoid ★★★★★
( 16.05.18 15:11:41 MSK ) автор топика
Ответ на: комментарий от Vsevolod-linuxoid 16.05.18 15:11:41 MSK

У тебя работает. Поменяй на style=«text-align:justify;text-align-last:justify»

ddidwyll ★★★★
( 16.05.18 15:13:30 MSK )
Ответ на: комментарий от ddidwyll 16.05.18 15:08:21 MSK

Вот этот пример завелся лучше, в Firefox 52 ESR и Chromium все нормально, а вот NetSurf не справился.

Vsevolod-linuxoid ★★★★★
( 16.05.18 15:13:56 MSK ) автор топика

Это тебе не дано. Как видно, даже хеллоуворлды не по плечу. Ты лучше иди троллить в ветки про гном, это у тебя хорошо получается.

anonymous
( 16.05.18 15:26:54 MSK )
Ответ на: комментарий от Vsevolod-linuxoid 16.05.18 15:13:56 MSK

Не знаю зачем тебе это (выключка с обеих сторон — плохая практика в большинстве случаев), но читать надо про переносы, межбуквенное расстояние и т.д., про NetSurf хз, насколько он css поддерживает.

Если вы не уверены, какую выключку выбрать, выбирайте выключку влево: варианты «Вправо» и «По ширине» в вебе редко себя оправдывают. В неровном крае нет ничего плохого. Выключенный влево текст легче читать, так как глаз видит чёткое визуальное окончание каждой строки. Но по-русски такой текст удобно читать, если строка не слишком длинная. Поэтому, если ваша строка больше 60 символов, попробуйте расключенный набор. Только не забудьте расставить переносы и проверьте, всё ли выглядит хорошо: несколько переносов подряд определённо затруднят чтение.

Это для фиксированного по ширине блока, для динамического будет плохо.

ddidwyll ★★★★
( 16.05.18 15:29:27 MSK )
Последнее исправление: ddidwyll 16.05.18 15:30:31 MSK (всего исправлений: 1)

Ответ на: комментарий от ddidwyll 16.05.18 15:29:27 MSK

Если честно, то у меня была специфичная задача и, как выяснилось, для неё не подходит текст по ширине. Там меню надо было сделать. Я решил через табличное форматирование, костылями честно говоря. Но работает.

Но все равно спасибо за подсказки, вдруг ещё понадобятся.

text-align

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

text-align: center | justify | left | right | inherit

text-align: center | justify | left | right | start | end

Значения

center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(» elementID «).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Не работает выравнивание по центру text-align: center

Нужно, чтобы блок cent был выровнен по центру. Сейчас это выглядит так:

Отслеживать

15.5k 3 3 золотых знака 18 18 серебряных знаков 30 30 бронзовых знаков

задан 22 сен 2016 в 21:25

63 1 1 золотой знак 2 2 серебряных знака 5 5 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Блочные элементы не получится выровнять через text-align . Добавьте margin к классу cent с отступами по правому и левому краю, как auto .

 
 
123123123123123123123123123
321321321321321321321321321321321321321321321
111111111111111111
222222
333333333
 
000
 
 
 

Отслеживать

ответ дан 22 сен 2016 в 21:36

Инженер-погромист Инженер-погромист

232 2 2 серебряных знака 13 13 бронзовых знаков