解决未知大小图片在已知容器中垂直居中的三种方法

作者:铁将军 / 查看次数: - / 评论：0

最近在做设计Div+Css的网站中遇到未知大小图片在已知容器中垂直居中的问题，通过网上搜索并加以自己实践，得出三种方法能很好地解决此问题，并且兼容IE和FF、Oper等主流浏览器，不也独享，现贴出来与大家分享！
1、本人认为最简单有效的一种：

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

二、淘宝前端开发工程师怿飞的方法，看起来比较复杂

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

原文链接：http://www.planabc.net/2008/05/26/img_vertical_center_solution/

三、老外的方法，原先是利用字体高度及行高和容器高度一致实现图片垂直居中，不过发现容器的高度会比标准浏览器高出一截，结合怿飞的方法，容器高度x0.873=字体大小得以完美实现。

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>未知大小图片在已知大小容器水平/垂直居中</title>
<style type="text/css" media="screen">
 div{
  height:200px;
  width:300px;
  background:#F0F;
  text-align:center;/*设置水平居中*/
  line-height:200px;
  font-size:175px;/*约为高度的0.873，200x0.873 约为175*/

}
 *>div{
  font-size:12px
 }
 img{
  vertical-align:middle;/*设置垂直居中*/
  border:0;
 }
 a.container{
  display:block;
  text-align:center;/*设置水平居中*/
  height:400px;
  width:300px;
  line-height:400px;
  font-size:349px;/*约为高度的0.873，400x0.873 约为349*/
  background:tomato;
 }
 *>a.container{
  font-size:12px
 }
 /* Layout styles */
 h1{
  font:bold 18px Verdana, Arial, Helvetica, sans-serif
 }
 p{
  font:12px Verdana, Arial, Helvetica, sans-serif
 }
 .container{
  margin:0 0 20px
 }
 pre{
  float:right;
  font:12px "Courier New", Courier, monospace;
  border:1px solid #CCC;
  padding:5px
 }
</style>
</head>
<body>
<h1>Applied CSS Vertical-Align</h1>
<pre>
div{
 height:200px;
 width:300px;
 background:F0F;
 text-align:center;
 line-height:200px;
 font-size:200px
}
*>div{
 font-size:12px
}
img{
 vertical-align:middle;
}
</pre>
<div class="container"><img src="http://www.gzink.com/images/logo.jpg" alt="" /></div>
<br><br>
<pre>
a.container{
 display:block;
 text-align:center;
 height:400px;
 width:300px;
 line-height:400px;
 font-size:400px;
 background:tomato
}
*>a.container{
 font-size:12px
}
img{
 vertical-align:middle;
}
</pre>
<a class="container" href="#"><img src="http://www.gzink.com/images/logo.jpg" alt="" /></a>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: 编程设计网页技巧

相关日志:

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.