CSS:如何让内容在div中垂直居中

我在制作页面的时候经常遇到一个CSS问题就是无法让内容(文字、图片)在div中垂直居中,比如:

  
<div id="pro_1">
<span class="proimg" ><img src="/face.gif" /></span>
<span class="infopro" >个人信息介绍...</span>
</div>

CSS 代码:

  
#pro_1 {height:100px;display:block;overflow:hidden;padding:2px;}
.proimg {vertical-align: middle;height:100%;}

但是有时效果不好,所以经常会用padding-top的方式去解决距中问题,但这种方法不能动态的解决不同高度下的内容垂直居中问题,谁能提供一个更好的规范的方法?

评论 (3)链接2011-09-04 
  • 0 支持
    vertical-align: middle不太灵光。 – 刘锡涛 2011-09-04
  • 0 支持
    vertical-align貌似对img和input有效对其他标签效果不大 – 小白 2011-09-05
  • 0 支持
    感觉垂直对其只有在表格里面才会有很好效果,其他地方不好用啊,我要是遇到了楼主这个问题,果断上下padding解决啊。。。 – 晏斯 2012-07-27

分为三个文件all.elehtml.js elehtml-buju.html all.elehtml.css
其中all.elehtml.js 的内容如图:
all.elehtml.js
接下来看 elehtml-buju.html的代码:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML元素布局学习</title>
</head>
<body>

<div id='container'>

</div>

<div id='container1'>

</div>

</body>
</html>

<link href='css/bjextreme/all.elehtml.css' rel='stylesheet' type='text/css'>
<script src='js/debug/nitobibug/compressed.js' type='text/javascript'></script>

<script src='js/bjextreme/all.elehtml.js' type='text/javascript'></script>


有这两个我们可以看到 BJExtreme.Dom.$c.test(); 运行成功,可以动态创建HTML元素

下一步,我们将通过all.elehtml.css' 文件来使得这两个div 绝对居中[左右居中和上下居中],如图:
all.elehtml.css
下面贴出 CSS文件的代码:
all.elehtml.css

小飞
小飞
6842
编辑于 2011-12-20
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2011-12-20

在div中加一个s作为填充,对未知高度的图片很有效。具体原理忘了。

  
<div id="pro_1">
<span class="proimg" ><img src="/face.gif" /></span>
<span class="infopro" >个人信息介绍...</span>
<!-- <s>标签作为内部填充 -->
<s></s>
</div>

/*css*/
s{display:inline-block; height:100%; vertical-align:middle;}
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2011-09-05

先给你一个针对所有浏览器,且方法简单的demo。

  
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="简单的HTML页面" />
<meta name="Description" content="这是一个简单的HTML页面" />
<title>简单的HTML页面</title>
</head>
<body>
<style type="text/css">
.box {
display: table-cell;
vertical-align:middle;
width:200px;
height:200px;
text-align:center;
/* hack for ie */
*display: block;
*font-size: 175px;
/* end */
border: 5px solid red;
}
.box img {
vertical-align:middle;
}
</style>
<div class="box">
<img src="http://www.google.com.hk/images/srpr/logo3w.png" alt="" />
</div>
</body>
</html>

上面的代码,重点是HACK的地方。因为对其他标准浏览器的话不需要HACK的地方。你可以测试一下,如果还有不明白的地方,可以@我。

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-08-21

单行居中:
line-hight:100px;
hight:100px;

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-11-16
德问是一个专业的编程问答社区,请 登录注册 后再提交答案