выравнивание текста по ширине, не может переопределить

У меня есть текст с text-align: justify;, свойство наследуется в ссылках и других вложенных строчных элементах в этом тексте. Я хочу установить для некоторых из них другой режим выравнивания текста, например text-align: center;, но не могу. Firebug показывает, что родительский стиль переопределен, но вложенный встроенный элемент по-прежнему выравнивается. Я заметил это странное поведение во многих разных браузерах, и, очевидно, они делают это по спецификации? Это действительно по дизайну? Как это обойти?

РЕДАКТИРОВАТЬ: Некоторый пример кода. Диапазон с ID=span1 не может определить собственное выравнивание текста. Он должен быть выровнен по правому краю, но вместо этого он центрирован. Пока я экспериментировал, я заметил, что встроенные элементы вообще не могут определять выравнивание текста. Очень странно.

<html>
<head>
<style type="text/css">
#cubic { width: 495px; height: 200px; background-color: green; text-align: center}
#span1 {text-align: right; color: red}
</style>
</head>

<body>
<p id="cubic">
<span id="span1">This is span 1</span>
</p>
</body>
</html>

css text-alignment
person Boris Hamanov    schedule 02.04.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Верный; встроенные элементы не могут иметь набор text-align, если только они не настроены на отображение блока.

Простой пример:

<html>
<style>
    #spanInline {text-align:right;}
    #spanBlock {text-align:right;display:block;}
    #divBlock {text-align:right;}
    #divInline {text-align:right;display:inline;}
</style>
<body>
<span id="spanInline">asdf</span><br />
<span id="spanBlock">asdf</span><br />
<div id="divBlock">asdf</div><br />
<div id="divInline">asdf</div><br />
</body>
</html>

Если вы создадите границы вокруг элементов, вы увидите больше информации о том, почему это не работает.

person James Skemp    schedule 03.04.2011
comment
Кроме того, есть ли причина для промежутка? Будет ли у вас когда-нибудь что-нибудь с элементом абзаца? Если нет, поскольку вы не используете один класс, кажется странным наличие дополнительного элемента. - person James Skemp; 03.04.2011
comment
Это просто пример, это не настоящий код. Я объявил text-align в элементе уровня родительского блока, и теперь все в порядке. Спасибо всем за помощь! - person Boris Hamanov; 03.04.2011
comment
Идеальный. А я просто хотел убедиться :) - person James Skemp; 03.04.2011

arrow_upward
2
arrow_downward

На самом деле text-align применяется только к блочным элементам, а span не является блочным элементом. Пожалуйста, попробуйте следующий код:

<p id="cubic">
<div id="span1">This is div 1</div>
</p>

и проверьте, соответствует ли он вашим потребностям.

person Lorenzo Marcon    schedule 03.04.2011

arrow_upward
0
arrow_downward

Сам столкнулся с этой проблемой, и более быстрое решение - использовать встроенный блок:

#span1 { display: inline-block; text-align: right; color: red}

Нехорошо устанавливать для ваших промежутков простой блочный элемент, потому что блочные элементы будут добавлять разрывы строк до и после элемента. Если у вас есть интервалы внутри абзаца, это полностью разорвет абзац.

person Nelson    schedule 19.10.2015