居中text-align,vertical-align

[b]水平居中[/b]
text-align:center
对于ie6、7块级和内联级都可以水平居中。
其它浏览器内联级(内联块级,文字)元素才可以水平居中,块级无效。
margin:0 auto
块级元素设置了宽度可以使用margin:0 auto居中,内联元素无效。
[b]垂直居中[/b]
网上已经有很多种垂直居中的方法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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值