Почему я не могу выровнять по правому краю элемент с display: block и width: X?

Question

Общий вопрос n00b здесь (по крайней мере, для элиты CSS):

Почему это элемент с обоими display: block; и значение для width не похоже на соответствие text-align собственность его родителя? То есть, кажется, всегда настаивают на том, чтобы идти налево.

Вот jsFiddle, иллюстрирующая проблему.

Очевидно, что это должно соответствовать спецификации CSS (я имею в виду, если Chrome, Firefox и Opera все согласны с этим, у меня очень мало сомнений); Я просто не понимаю

Answer 1

Текст выравнивается прямо внутри поля размером 150 пикселей. Это правильно. Элемент блока не будет совмещен с выравниванием текста в родительском элементе.

Чтобы это исправить, вам нужно использовать либо display: inline-block или же float: right на.width div.

редактировать: с плавающей точкой, добавить clear: right чтобы он не был на одной линии с предыдущим div

Answer 2

Альтернативный способ

<div style="text-align:right; margin:0px auto 0px auto;">
<p> Hello </p>
</div>
  <div style="">
<p> Hello </p>
</div>

Answer 3

<span> это элемент с display: inline, Элементы с display: inline после выравнивания текста. Элементы с display: block не следит за выравниванием текста, выровнены СОБСТВЕННЫМ поплавком.

Когда вы просто изменяете ширину элемента, он остается встроенным, после выравнивания текста, но когда вы изменяете отображение на блоки и изменяете его ширину, его содержимое предполагает выравнивание текста, а элемент - нет. Я попытался проиллюстрировать это некоторым цветом в вашем коде;)

http://jsfiddle.net/Z6Twf/3/

Answer 4

Это потому, что ваш класс это ширина блока, а не ширина. Переименуйте класс block_width и затем в вашем css сделайте последний.block_width вместо.width у вас есть, и это работает