Question

当内部div具有静态高度时，在另一个div内垂直对齐div的好方法是什么？至于高度有时会有所不同。 http://jsfiddle.net/daCt3/

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;
}

Answer 1

用于粘性行为的浮动框，用于柱状视图的边距的％单位是大多数人在其网站中使用的。检查google.org以获取示例。

Answer 2

这里有一篇文章描述了一个解决方案：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/

垂直对齐div内的div？

2 个答案: