CSS图片垂直居中实现方法详解
CSS图片垂直居中实现方法详解
发布时间:2016-12-27 来源:查字典编辑
摘要:方法一:利用定位HTML结构如:CSS代码如:body{margin:0;padding:0;font:12px/1.5tahoma,ari...

方法一:利用定位

HTML结构如:

<div>

<a href="#" target="_blank">

<img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png">

</a>

</div>

CSS代码如:

body {

margin: 0;

padding: 0;

font: 12px/1.5 tahoma,arial;

}

.box {

width: 220px;

height: 220px;

border: 1px solid #F30;

margin: 100px auto 0;

display: table;

}

.pic-wrap {

display: table-cell;

text-align: center;

vertical-align: middle;

}

/*主要针对IE6、7的hack*/

.box {

*position: relative;

}

.pic-wrap {

*width: 100%;

*position: absolute;

*top: 50%;

*left: 0;

/*继承自body的字体会影响到ie6,设置默认的windows系统字体*/

_font-family: sans-serif;

}

.pic-wrap img {

*position: relative;

*top: -50%;

*left: 0;

/*在ie中空文本节点有默认高度*/

vertical-align: middle9;

/*在ie中,a标签中的img标签默认有蓝色边框*/

border: none9;

}

方法二:

HTML结构同上;

CSS代码如:

.box {

width: 220px;

height: 220px;

border: 1px solid #F30;

margin: 100px auto 0;

}

.pic-wrap {

display: table-cell;

vertical-align: middle;

width: 220px;

height: 220px;

text-align: center;

/*ie6、7不支持display:table-cell*/

*display: block;

*font-size: 192px; /*字体大小为height*0.783或者height/1.14,这里约为192px*/

_font-family: sans-serif; /*设置字体,否则在ie6下会有一个像素的偏差*/

}

.pic-wrap img {

border: none;

vertical-align: middle; /*由于ie下空文本节点有默认高度,所以设置*/

}

【注意,当在css中设置了body元素字体的话,那么方法二在ie7下会失效的】

最佳方法:

CSS代码如:

body {

margin: 0;

padding: 0;

<SPAN>font: 12px/1.5 tahoma,arial;</SPAN>

}

.box {

width: 220px;

height: 220px;

border: 1px solid #F30;

margin: 100px auto 0;

}

.pic-wrap {

display: table-cell;

vertical-align: middle;

width: 220px;

height: 220px;

text-align: center;

/*ie6、7不支持display:table-cell*/

*display: block;

_font-size: 192px;

<SPAN>+line-height: 220px; /*设置ie7中空文本节点行高为220px*/</SPAN>

_font-family: sans-serif;

}

.pic-wrap img {

border: none;

vertical-align: middle9; /*由于ie中有默认高度的空文本节点*/

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类