2 октября 2009, 7:39

CSS: vertical-align для DIVа с изменяемой высотой

Есть Хтмл, в нём Див.dynamic с контентом изменяемого размера и контейнер.middle плавающий, что должне быть по центру.
<div id="container">
    <div id="dynamic">
       любая текстовая рыба
   </div>
   <div id="middle">
       <div id="ie_helper">
           <p>ТекстЪ по центру. </p>
       </div>
   </div>
</div>
Есть простенький цсс, который просто делает с наших дивов ячейку, и потому работает вертикал-алигн.
#container {
    display: table;
    width: 100%;
}
    #dynamic {
        display: table-cell; 
        width: 200px;
        background: #0d0;
    }
    #middle {
        display: table-cell;
        vertical-align: middle;
    }
Но для ИЕ ниже 7, понятия «табличная ячейка» и ДИВ не соместимы, потому туда идёт хак-контейнер.ie_helper
<!--[if lte IE 7]>
<style type="text/css">
    #dynamic {
        float: left;
    }
    #middle {
        position: relative;
        top: 50%;
    }
    #ie_helper {
        position: relative;
        top: -50%;
    }
    #middle,
    #ie_helper,
    #container p {
        zoom: 1;
    }
    * html #dynamic_height_giver {
        margin-right: -3px;
    }
</style>
<![endif]-->


Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter