欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  一、首先,我们来看看css图片水平居中的方法
 
  1、利用margin:0auto实现图片水平居中
 
  css图片水平居中代码:
 
  <divstyle="text-align:center;width:500px;border:greensolid1px;">
 
  <imgalt=""src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"style="margin:0auto;"/>
 
  </div>
 
  2、利用文本的水平居中属性text-align:center实现图片水平居中
 
  css图片水平居中代码:
 
  <divstyle="text-align:center;width:500px;border:greensolid1px;">
 
  <imgalt=""src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"style="display:inline-block;"/>
 
  </div>
 
  二、我们来看看css图片垂直居中的实现方法
 
  1、利用高==行高实现图片垂直居中
 
  css图片垂直居中代码如下:
 
  <divstyle="text-align:center;width:500px;height:200px;line-height:200px;border:greensolid1px;">
 
  <imgalt=""src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"style="display:inline-block;vertical-align:middle;"/>
 
  </div>
 
  注意:此种方法需要注明高度才可以使用。
 
  2、利用table实现图片垂直居中
 
  css图片垂直居中代码如下:
 
  <divstyle="text-align:center;width:500px;height:200px;display:table;border:greensolid1px;">
 
  <spanstyle="display:table-cell;vertical-align:middle;">
 
  <imgalt=""src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"style="display:inline-block;"/>
 
  </span>
 
  </div>
 
  注意:此种方法是利用了table的垂直居中属性
 
  说明:这里使用display:table;和display:table-cell;来模拟table,这种方法并不兼容IE6/IE7,IE67不支持display:table,如果你不需要支持IE67那就可以用
 
  这种方法有一个缺点:当你设置了display:table;可能会改变你的原有布局
 
  3、利用绝对定位实现图片垂直居中
 
  css图片垂直居中代码如下:
 
  <divstyle="width:500px;height:200px;position:relative;border:greensolid1px;">
 
  <imgalt=""src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"style="width:120px;height:40px;position:absolute;left:50%;top:50%;margin-left:-60px;margin-top:-20px;"/>
 
  </div>
 
  说明:如果已知图片的宽度和高度可以用这种方法。





本文转载自中文网


 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c55423.shtml