CSS: Выравниваение блока с неизвестной шириной по центру

2012-05-24

Общеизвестный прием при выравнивании 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 уже всё ОК.



Один комментарий на «CSS: Выравниваение блока с неизвестной шириной по центру»

  1. * margin: 0px auto;

Добавить комментарий