Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > div вертикальное выравнивание

Автор: Fubu_By 14.1.2009, 13:27

есть такая html

Код


<style>
.body
{
    font-family: sans-serif;
    color: #242424;
    font-size: 11px;
    font-weight: normal;
    font-stretch: expanded;
    line-height: 15px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    height: 100%;
    width: 182px;
}
</style>
<body style="margin: 0px; height: 100%; background-color: #E1E1E1; width: 182px;" scroll="no">
<div class="body"><div id="center" style="height: 50px">bla bla bla</div></div>

как сделать div id="center" по центру(во вертикали) без позиционирования

Автор: hunterman 14.1.2009, 14:45

http://cssing.org.ua/2007/04/26/another-css-valign-method/
http://cssing.org.ua/2005/07/14/vertical-align-middle/

Автор: Fubu_By 14.1.2009, 14:50

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

Автор: Violator 14.1.2009, 15:22

Fubu_By, нормально выравнивает

Код


<div style="display: table; height: 100%; _position: relative; overflow: hidden; background: blue;">
<div style="_position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
<p style="_position: relative; _top: -50%; background: gray;">
any text<br />
any height<br />
any content, for example generated from DB<br />
everything is vertically centered
</p>
</div>
</div>

Автор: Fubu_By 14.1.2009, 16:13

Цитата(Violator @ 14.1.2009, 15:22)

Fubu_By, нормально выравнивает

Код


<div style="display: table; height: 100%; _position: relative; overflow: hidden; background: blue;">
<div style="_position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
<p style="_position: relative; _top: -50%; background: gray;">
any text<br />
any height<br />
any content, for example generated from DB<br />
everything is vertically centered
</p>
</div>
</div>

позиционирование не подходит

Автор: olldman 14.1.2009, 18:53

#center{width:100px;height:50px;margin:0px auto;}

Автор: Fubu_By 15.1.2009, 13:34

это по горидонтали получится, а не повертикали

Автор: hunterman 15.1.2009, 17:22

тогда либо подогнать решение чтобы подходило позиционирование либо сверстать кусок таблицей.