菜单

CSS图片垂直居中方法

2012年03月23日 - css

CSS图片垂直居中方法
当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
原帖链接:IE6下用writing-mode实现 未知高度替换元素垂直居中。




利用定位来显示垂直局中的图片




固定高宽的容器中,图片垂直局中。

使用的绝对定位和相对定位的方法

Logo你知道的太多了你知道的太多了你知道的太多了

Logo你知道的太多了你知道的太多了你知道的太多了

Google你知道的太多了

因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法是:





利用定位来显示垂直局中的图片




固定高宽的容器中,图片垂直局中。

绿色容器是span,目的是使自己的左上角与容器中心点对齐。红色是具体图片,再次设置负值使自己的中心点和父容器的中心点重合,最终达到垂直局中的目的。

Logo

Logo

Google

如果不喜欢条件注释,可自行将代码以css hack的方式拼凑起来。




标准浏览器下另类方法:




标准浏览器严格型申明下:




利用字体大小的方法:





display:inline-block 方法




背景图片的方法





发表评论

电子邮件地址不会被公开。 必填项已用*标注