Вопросы по html и css

[Buradem]

В этом деле новичок, надеюсь на понимание!

Делаю страницу на div-ах, она представляет из себя визитку, так что блоки располагаются нестандартно, так вот вопрос: как сделать чтобы div внутри div-a располагался строго по середине (вертикально), если основной див не фиксированный по вертикали.
Вот css:

html, body {
height:100%;
}
.body {
width:990px;
height:100%;
margin:0 auto;
}
.txt {
bottom:50%;
left:150px;
}

Html выглядит так:

<div class="body">
Меню
<div class="txt">Тут текст, который нужно вертикально отцентровать!
</div>
</div>

Как-то так. Возможно проще было на flash сделать, но интересует именно этот способ. Или это глупости и надо другим путём идти?

[MonAmur]

http://yandex.ru/yandsearch?clid=958...%B5+css&lr=213

[Buradem]

MonAmur,искал я, вот сходу по вашему запросу, открываю первую страницу: http://blog.sribna.com/vertikalnoe-v...ss-chast-2.htm
на нём указан метод, который у меня не работает.

[MonAmur]

а если так?

.txt {
position : absolute;
top : 50%;
height : 240px;
margin-top : -120px; /* минус от половины высоты */
}

[Buradem]

MonAmur, это почти то, что нужно, только не пойму откуда взялось:
height : 240px;
margin-top : -120px; /* минус от половины высоты */
и почему именно такие значения? Если меняю их, то с центра уходит, но и так не при всяком разрешении находится строго по центру, немного "гуляет".
Правда я переделал немного, мне absolute не подходит, надо relative, чтобы от родительского дива отталкивался.
Теперь такой код получился:

.txt {
position:relative;
top : 50%;
height : 240px;
margin-top : -120px;
font-size:22px;
font-style:italic;
left:120px;
width:500px;
}

Поясните плиз про height, пробовал до этого и top и bottom указывать, но эффекта не было никакого! (

З.Ы. на абсолюте без проблем по центру выставлял, но мне именно надо от родительского отталкиваться.

[MonAmur]

может, попробовать использовать display: table-cell; с cssхаком для IE:

<style type="text/css">
.box{
display: table-cell;
vertical-align: middle;
height:200px;
border:1px solid #666;
}
.middle{
margin-top:expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
}
</style>

<div class="box">
<div class="middle">
Эта строка находится в центре<br />
И эта тоже
</div>
</div>

[Buradem]

Тоже так пробовал, не получается тогда по высоте растянуть, height:100%; не хочет почему-то работать с display: table-cell;
Хороший вариант, если только заставить его растянуться как надо)

[karasssa]

1) Отобразить блок по центру в вертикальном порядке возможно только, если задать фикс. высоту и margin:auto 0 (ну или margin:auto, чтоб отобразить по центру как по вертикали, так и по горизонтали). При этом блок должен находиться в пределах тела (body) как родителя либо блока с height:100%. Иначе не получится.

2) Можно блок сделать таблицей - таблица выравнивается без проблем так, как нам надо.

3) Можно через яву задать margin-top, высчитав половину высоты экрана минус половину высоты блока, при этом высоту нужных элементов посчитает сам скрипт.

[Buradem]

Сделал по совету MonAmurа, пока результат устраивает, за что ему спасибо! )
А вот ещё вопрос, можно ли растягивать div в процентах с бэкграундом в виде картинки? Т.е. чтобы картинка сама увеличивалась или уменьшалась в зависимости от разрешения экрана? Или для каждого разрешения нужно отдельно условия писать?

[karasssa]

Scalable Background Image Plug-in: http://nooshu.com/jquery-plug-in-sca...ckground-image