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

发布于 2016-12-09 09:33:02 字数 266 浏览 1223 评论 4

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

想挽留 2017-09-19 01:53:06

先给你一个针对所有浏览器，且方法简单的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

瑾兮 2017-08-18 19:33:30

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

回复收藏 0

夜无邪 2017-05-26 19:27:07

分为三个文件all.elehtml.js elehtml-buju.html all.elehtml.css
其中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>

</div>

</body>
</html>

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

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

下面贴出 CSS文件的代码:

回复收藏 0