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

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

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

вот jsFiddle, иллюстрирующий проблему.

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

10
css layout text-alignment

4 ответов

текст выравнивается прямо внутри поля 150px. Это верно. Элемент блока не будет выравниваться по тексту-выравнивание в родительском элементе.

чтобы исправить это, вы должны использовать display: inline-block или float: right на .ширина разд.

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

12

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

0

<span> является элемент display: inline. Элементы с display: inline после выравнивания текста. Элементы с display: block не следует выравнивание текста выровнены принадлежат float.

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

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

0

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

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