2013-08-06 4 views
0

Что хорошего в вертикальном выравнивании div внутри другого div, когда внутренний div имеет статическую высоту? Что касается высоты, то иногда будут разные. http://jsfiddle.net/daCt3/Вертикальное выравнивание div внутри div?

HTML:

<div id="footer"> 
<div id="footerLeft"> 
<div id="copyright"> 
<!-- <copy> -->Copyright MyCorp &copy; 2013<!-- </copy> --> 
    <br>Some more random stuff 
</div> 
</div> 
<div id="footer-right"> 

</div> 
</div> 

CSS:

/*-- FOOTER --*/ 

#footer { 
    bottom:0px; 
    width:100%; 
    padding-bottom:20px; 
    padding-top:0px; 
    background-color:#2C2E31; 
    border-top:#242426 solid 2px; 
    position:fixed; 
    height:100px; 

} 

#footerLeft { 
    margin-top:50px; 
    float:left; 
    width:300px; 
    background-color:red; 
} 
+0

Вы посмотрели на другие ответы? Как этот: http://stackoverflow.com/questions/14879849/vertical-aligned-div?rq=1 – Whistletoe

ответ

0

Плавающие коробки для липкого поведения,% единиц в полях для колонных взглядов, что большинство людей используют на своих сайтах. Например, проверьте google.org.

0

Одно решение описано в статье здесь: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Я обновил свой CSS, чтобы выглядеть следующим образом:

CSS:

#footer { 
    height: 400px; 
    overflow: hidden; 

    /* styling */ 
    bottom:0px;    
    width:100%; 
    background-color:#2C2E31; 
    border-top: #242426 solid 2px; 
    height: 100px; 
    position: fixed; 
} 
#footer[id] { 
    display: table; 
    position: fixed; 
} 

#footerLeft { 
    position: absolute; 
    top: 50%; 
} /* for quirk explorer only*/ 

#footerLeft[id] { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    position: static; 
} 

#copyright { 
    position: relative; 
    top: -50%; 

    /* styling */ 
    background: red; 
    width: 300px; 
} /* for quirk explorer only */ 

Вы можете посмотреть пример от этого здесь: http://jsfiddle.net/UbzcC/1/

Смежные вопросы