admin19.05.2014 18:56

Позиционирование в DIV по вертикали, CSS vertical-align middle, bottom

По умолчанию контент внутри DIV располагается всегда вверху, поэтому интересно лишь заставить содержание DIV оказаться в центре или внизу.

CSS

<style type="text/css">
.table {
	border:1px #ccc solid;
	display:table-cell;
}
.table .tr, .table .td { position: relative;}

.vmiddle {vertical-align:middle;}
.vbottom {vertical-align:bottom;}

/* fix for ie6 */
.vbottom .tr, .vbottom .td {  //top: 100%; width: 100%;}
.vbottom .td {//top: -100%;}

/* fix for ie6 */
.vmiddle .tr, .vmiddle .td {  //top: 50%; width: 100%;}
.vmiddle .td {//top: -50%;}
</style>

HTML

<div class="table vmiddle" style="height: 200px;">
<div class="tr">
<div class="td"><strong>Текст посередине DIV</strong></div>
</div>
</div>
<div class="table vbottom" style="height: 100px;">
<div class="tr">
<div class="td"><strong>Текст внизу DIV</strong></div>
</div>
</div>