Привет всем!
Я зараннее извиняюсь, если тема уже поднималась( чё-то не нашёл ничего) 
Я бы не морочил голову ни себе, ни другим - использывал бы таблицы, но заказчик упёрся в чистый css. 
Проблема в следующем: необходимо внутри div-а выровнять содержимое по вертикали посредине.
Код:
| Код |
<body>
<div class="head"><img src="images/logo.jpg"></div>
<div class="menu-line"><img src="images/submit.gif"></div>
<div>main content will be here</div>
<div class="footer">Copyright © 2006, Company Name, LLC. All rights reserved.Copyright Information - Privacy Policy</div>
</body>
|
| Код |
.head
{
background-image:url(images/head.jpg);
background-position:inherit;
background-repeat:repeat-x;
text-align:right;
height: 79px;
width: 100%;
}
.menu-line
{
background-image: url(images/menu.jpg);
background-position: inherit;
background-repeat: repeat-x;
height: 37px;
width: 100%;
display: table;
vertical-align: middle;
}
.footer
{
background-image: url(images/footer.jpg);
background-position: inherit;
background-repeat: repeat-x;
height: 37px;
width: 100%;
vertical-align: middle;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
display: table;
vertical-align: middle;
}
|
Замечу:
вместо
display: table;
использовал
display: table-cell;
получал желаемое отображение, но границы div-a обрезались по краю контента, и работало это только в Opera и FireFox, в IE так ничего вообще не произошло 
Я надеюсь что кто-то уже сталкивался с этим, и сможет мне подсказать что делать.
Заранее спасибо! |
