выравнивание текста выровнять, не может переопределить - PullRequest
Новая
       1

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

2 голосов
/ 03 апреля 2011

У меня есть текст с 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>

Ответы [ 3 ]

3 голосов
/ 03 апреля 2011

Корректное;встроенные элементы не могут иметь установленного выравнивания текста, если они не настроены для отображения блока.

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

<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>

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

2 голосов
/ 03 апреля 2011

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

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

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

0 голосов
/ 19 октября 2015

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

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

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

...