stats区如何让图片和文字都居中对齐
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Html和CSS的关系</title>
<style type="text/css">
.stats{width:100%;};
.main{width:1400px;margin:0 auto;position:relative;}
.stats>.main>h1,p{text-align:center;}
.stats>.main>.mainnav{postion:absolute;left:0;right:0;margin:auto;width:800px;height:500px;}
.mainnav>dl{display:block;float:left;width:100px;height:100px;margin-left:78px;position:relative;}
.mainnav>dl>img{position:absolute;left:30px;bottom:40px;}
.mainnav>dl>dt{position:absolute;left:30px;bottom:20px;}
.mainnav>dl>dd{position:absolute;left:-3px;bottom:0px;}
</style>
</head>
<body>
<section class="stats">
<div class="main">
<h1>Stats</h1>
<p>lorem ipsum dolor sit amet,consectetor adisicing elit,lorem ipsum dolor sit amet,consectetor adisicing elit,lorem ipsum dol,lorem ipsum dolor sit amet,consectetor adisicing elit,lorem ipsum dolor sit amet,consectetor adisicing elit,lorem ipsum dol
</p>
<div class="mainnav">
<dl >
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
<dt>Margins</dt>
<dd>12,000</dd>
</dl>
<dl >
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
<dt>Completed</dt>
<dd>8,600</dd>
</dl>
<dl>
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
<dt>projects</dt>
<dd>666</dd>
</dl>
<dl >
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
<dt>Customers</dt>
<dd>888</dd>
</dl>
</div>
</div>
</section>
</body>
</html>100
收起
正在回答
3回答
针对你现在的代码，把下图中的代码删掉（不需要一个一个的定位）
，加上*{margin:0px;padding:0px;}，再给每个dl加上text-align:center;，就可以让文字部分相对图片居中对齐了。
相似问题
登录后可查看更多问答，登录/注册
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星