首页 > 代码库 > 让图片在div 中居中的方法

让图片在div 中居中的方法

方法一:

  思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。

  结构如下:

  <div>

  <img src="http://www.mamicode.com/images/tt.gif" width="150" height="100" />

  </div>

  CSS样式如下:

  div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}

  运行结果如下:

  

                          技术分享

 

方法二:

  思路:只用padding属性,通过计算求得居中

  结构代码同上;

  CSS样式如下:

  div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}

  备注:这里DIV的宽高计算都遵循盒模型原理,计算方法同上。

 

  方法三:

  思路:

  利用图片的margin属性将图片水平居中,利用DIV的padding属性将图片垂直居中。

  结构代码同上;

  CSS代码如下:

  div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}

  img {display:block; margin:0 auto;}

  备注:

  Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中;(有的设计师为图片再加个div标签,然后通过div标签的margin实现居中

     http://zhidao.baidu.com/link?url=u2Sh1t3AcCqRjd0isIK27_rim1eSx06HmTItZPvfeazgj2mYFluTLzpWfOFqzIUyvikhSTRRizI3h680woVInq

让图片在div 中居中的方法