Общеизвестный прием при выравнивании DIV-а с известной шириной по центру заключается в том, чтобы задать выравниваемому блоку:
marin: 0 auto;
Но это совсем не работает в случае с блоком у которого неизвестна ширина.
Решить эту проблему можно следующим образом:
внешний блок должен выравнивать текст посредине, а внутреннему выравниваемому блоку говорим, что у него display должен быть inline-block и меняем выравнивание текста на необходимое для текста внутри него.
Пример:
<style type="text/css">
#wrapper {
text-align: center;
}
#aligned-block {
display: inline-block;
text-align: left;
}
</style>
<div id="wrapper">
<div id="aligned-block">Выравниваемый блок...</div>
</div>
Тесты показали, что этот прием работает во всех современных веб-браузерах и даже в IE7, что не может не радовать.
Есть и другие способы.
К примеру можно задать выравниваемому блоку:
display: table;
marin: 0 auto;
в этом случае он будет более подобен блоку, но не будет работать в IE7, хотя в IE8 уже всё ОК.
* margin: 0px auto;