WonderCSS

如何让图片垂直居中

在网站设计中经常会遇到需要让图片在容器内垂直居中对齐的时候,比如尺寸不统一的缩略图或产品图片时。为了解决这个问题,CSS3新推出的box属性可以轻松实现图片的垂直居中。比如让图片在 .boxs 容器内垂直居中。


<div class="boxs">
     <img src="image.jpg" alt="" />
</div>

.boxs 容器对应的CSS样式如下:


<style type="text/css">
.boxs {
     width: 600px;
     height: 600px;
     border: 2px solid #333333;
     text-align: center;
     /*webkit*/
     display: -webkit-box;
     -webkit-box-orient: horizontal;
     -webkit-box-pack: center;
     -webkit-box-align: center;
     /*moz*/
     display: -moz-box;
     -moz-box-orient: horizontal;
     -moz-box-pack: center;
     -moz-box-align: center;
     /*ms*/
     display: -ms-box;
     -ms-box-orient: horizontal;
     -ms-box-pack: center;
     -ms-box-align: enter;
     /*w3c*/
     display: box;
     box-orient: horizontal;
     box-pack: center;
     box-align: center;
}
</style>

display:box 的支持下其中 box-pack:center 为水平居中,box-align:center 为垂直居中。box属性暂时没有实现统一写法,所以需要各个浏览器单独标写,进而代码有些臃肿。不过依然看到曙光了。相信随着CSS3的标准统一,WEB设计的自由性会越来越好。

By 于湛 发布于 2013.03.12 3,471 次浏览

发表评论

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