居中text-align,vertical-align

水平居中
text-align:center
对于ie6、7块级和内联级都可以水平居中。
其它浏览器内联级(内联块级,文字)元素才可以水平居中,块级无效。
margin:0 auto
块级元素设置了宽度可以使用margin:0 auto居中,内联元素无效。
垂直居中
网上已经有很多种垂直居中的方法line-height,上下padding,table-cell,正负50%(ie不支持table-cell)。这里利用另外一种vertical-align: middle。
vertical-align各种浏览器只对内联块级元素起作用。
默认的内联块级有img,input,td。
img,input的vertical-align是对周围元素(内联)和自己的排版方式,td的是自己内部的对齐方式(即table-cell方法)。
如果把一个内联元素的高度设置和父容器一样大,则旁边的元素就可以垂直居中,如果是内联块级则也要设置vertical-align: middle;。
em{
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    zoom:1;
}
img{
    vertical-align: middle;
}
<p><em></em>文字居中</p>
<p><em></em><span>内联元素居中</span></p>
<p><em></em><img src="1.gif"/></p>

你可能感兴趣的:(html,浏览器,IE)