【沈阳seo】CSS让图片垂直居中的几种技巧

  • A+
所属分类:沈阳SEO

CSS让图片垂直居中的几种技巧-【黑酷网络】
在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。
方法一
将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很方便的使用vertical-align属性来对齐其中的内容了。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

<style type="text/css">

body {

height:100%;

}

#box{

width:500px;height:400px;

display:table;

text-align:center;

border:1px solid #d3d3d3;background:#fff;
}

#box span{

display:table-cell;

vertical-align:middle;
}

#box img{

border:1px solid #ccc;

}

</style>

<!--[if lte IE 7]>

<style type="text/css">?
#box{

position:relative;

overflow:hidden;

}
#box span{
position:absolute;

left:50%;top:50%;

}

#box img{

position:relative;

left:-50%;top:-50%;
}

</style>

<![endif]-->

</head>

<body>

<div id="box">

<span><img src="images/demo_zl.png" alt="" /></span>

</div>

</body>

</html>
方法二
标准浏览器的情况还是和上面一样,不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>方法2 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

<style type="text/css">

body {

height:100%;
}

#box{

width:500px;height:400px;
display:table-cell;

text-align:center;

vertical-align:middle;

border:1px solid #d3d3d3;background:#fff;

}

#box img{

border:1px solid #ccc;

}

</style>

<!--[if IE]>
<style type="text/css">?

#box i {

display:inline-block;
height:100%;

vertical-align:middle

}

#box img {

vertical-align:middle

}

</style>
<![endif]-->

</head>

<body>

<div id="box">

<i></i><img src="images/demo_zl.png" alt="" />

</div>

</body>
</html>
方法三
在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现居中,另外,对于IE6/IE7使用了CSS表达式来实现兼容。
view source
print?

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

<style type="text/css">

body {

height:100%;

}

#box{

width:500px;height:400px;

text-align:center;
border:1px solid #d3d3d3;background:#fff;

}

#box p{

width:500px;height:400px;

line-height:400px; /* 行高等于高度 */

}

/* 兼容标准浏览器 */

#box p:before{

content:"."; /* 具体的值与垂直居中无关,尽可能的节省字符 */

margin-left:-5px; font-size:10px; /* 修复居中的小BUG */

visibility:hidden; /*设置成隐藏元素*/

}

#box p img{

*margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */

vertical-align:middle;

border:1px solid #ccc;

}

</style>

</head>

<body>
<div id="box">

<p><img src="images/demo_zl.png" alt="" /></p>

</div>

</body>

</html>

沈阳网站建设选择我们就没错,提供全套的一条龙网站建设和沈阳seo服务,网站维护终身免费,让您最大程度上拥有成功网站优势!

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: