上海SEO

在网站制作的过程中会遇到css控制图片垂直居中问题，当然每个人所用的处理办法不一样。所以总结出来方法也各不一至。下面说下我在做网站时遇到这种情况是怎么处理的。

一般来说如果单是图片垂直居中的话，那可能会简单点， 但是往往我们实际运用中要稍微复杂点。下面看一个日本网站http://dht.co.jp/products/imaging_spectrograph/ 当时产品是自己做的，所以小图片尺寸都定为 81*81PX ，现在交给客户后，他们把图片处理的大小不一。 特别是高度，有的非常矮，这样一来，图片不居中，看上去特别难看。当然客户又找过来了。 以下是我所采用处理办法：
————–所涉及到的css 样式—————-
.information_box{
 width:210px;
 }
.information_img{
 display: table-cell;
 vertical-align:middle;/*设置水平居中*/
 text-align:center;
 *display: block; /* 针对IE的Hack */
 *font-size: 71px; /*约为高度的0.873，81*0.873 约为71*/
 *font-family:Arial; /*防止非utf-8引起的hack失效问题，如gbk编码*/
 width:83px;
 height:83px;
 border:1px solid #999999;
}
.information_img img{
 vertical-align:middle; /*设置图片垂直居中*/
}
.information_text{
 float:right;
 width:118px;
 margin:-85px 0 0 7px; /*因为上面无法设置float 所以边上的div 里的文字会延 图片div 排练。这里设置了float为right后再设置 margin-top 强制让他上浮。最终的效果就没问题了。*/
}
————————-
以上方法已经 ie 6 7 firefox google 测试过无BUG。
查看更多CSS技巧 http://www.seoweb-sh.com/?s=CSS

上海SEO  我们为企业提供优质电子商务解决方案一起关注企业网站！