Из ВК

07 июня 2008

блок, шириной по содержимому горизонтально по центру контейнера

проблема собственно в том, что IE не хавает комбинацию "display:table" что сильно мешает жить. перебрав кучу вариантов (многие из которых мне не удалось заставить работать, как-то использование в CSS для осла елементов JavaScript) я предлагаю вашему вниманию работающий (IE 5.5, 6, 7, 8b1, FF 3rc2, Opera 9.27, Safari 3.1) образец с комментариями:

CSS

/*это для ослов*/
.form{
float:left; /*опционально, нужно для того, чтоб последующие блоки можно было спустить под этот, не зная его высоты - используя clear:left*/
position:absolute; /*не relative потому что, relative не сожмёт блок до ширины содержимого, а если использовать для сжатия предыдущую строку, то могут сдвигаться вправо последующие блоки в этом контейнере на ширину этого*/
left:50% /*отодвигает блок до середины контейнера*/
}

.form-content{
margin:0px auto;
display:table;
/*предыдущих двух строк достаточно чтобы в нормальных браузерах (все кроме IE) выполнить все наши условия, последующие строки опять для IE*/
position:relative;
left:-50%;
/*предыдущие две строки двигают контейнер на 50% влево*/
}


пофторяю без коментов:
.form{
float:left;
position:absolute;
left:50%;
}

.form-content{
margin:0px auto;
display:table;
position:relative;
left:-50%;
}


собсна HTML банален:

<div class="form"><div class="form-content">
этот текст повис по центру
</div></div>