HTML && CSS 设计模式

---

1.Div子元素水平、垂直居中

方法一：设置container Div 的属性

display:box;
box-pack:center;
bor-orient:vertical;/*or horizontal*/
box-align:center;/*垂直居中*/
/*需要加前缀 -moz- -webkit-等*/

 疑问：box-pack:justify 时不能平均分割剩余空间，是抛弃该属性了吗？  怎样做到完全自定义的布局？比如水平元素之间的空间大小设定？

 

方法二：借助 height: 100% 的 inline-block helper 辅助元素，并且两个元素均设置vertical-align:middle;

 

Reference from StackOverflow

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=10 />
</div>

---