[CSS] <div> размером с контент + выравнивание по центру

[xintrea]

Здравствуйте!


Не могу сверстать следующую простую вещь.

Нужно сделать <div>, чтобы он по ширине был размером с содержащийся контент, т.е. не разъежжался на всю ширину свободного места.

Чтобы это сделать я пользуюсь свойством:

display: inline-block;

Однако еще нужно выровнять этот блок по центру (по горизонтали). Чтобы это сделать, я пользуюсь свойством:

margin: 0 auto;

Проблема в том, что если блок имеет свойство "display: inline-block;", то выравнивение по горизонтали не работает ни в одном браузере. А если убрать это свойство и задать фиксированный width, то работает.


Вопрос. Как сделать блок шириной с контент и выровнять его по центру?

Я пробовал заключить блок в еще один блок, но чтобы выровнять его по центру, ему всеравно нужно задать "display: inline-block;" - ведь если этого не сделать, блок получится шириной на все свободное место, и его опять же не выровнеешь по центру.

 

[rotoZOOM]

<div style="text-align: center;">
    <div style="display: inline-block; border: 1px solid gray">
        hello, world!
    </div>
</div>

Работает как минимум в FF, Chrome, а если еще доктайп выставишь, то и в IE.