想请问大div中有多个小的div，如何居中显示？

HTML：

<div><img src="img/stats1.jpg" alt=""><br/>Margins<br/>12,000</div>

<div><img src="img/stats2.jpg" alt=""><br/>Completed<br/>5,681</div>

<div><img src="img/stats3.jpg" alt=""><br/>Projects<br/>432</div>

<div><img src="img/stats4.jpg" alt=""><br/>Customers<br/>86</div>

</div>

机长与茶 2017-09-25

源自：HTML5展望 3-2 作业题

收起

2回答

卡布琦诺回答被采纳获得+3积分 2017-09-26 11:19:10

<style>
			.icon{
				/*宽度可自行计算设置*/
				width:800px;
				margin:0 auto;
			}
			.icon>div{
				float:left;
				margin:0 10px;
			}
		</style>

建议参考上列代码和注释进行理解，祝学习愉快！

收起回答

机长与茶提问者 #1

假如后面还有其他的div，那在此基础上要怎么往下移动并不会把后面的东西顶下去？直接用margin-top会把后面的顶下去。

2017-09-26 13:03:09
卡布琦诺回复提问者机长与茶 #2

不是很理解你说的意思，你说的是指的是。icon后面还有并列的div还是icon里面的子元素div后面还有其他的div，建议你写一个html的结构贴上来。以便于大家更好的理解问题并帮你解答！

2017-09-26 13:54:00
机长与茶提问者回复卡布琦诺 #3

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .stats{ min-width: 1200px; height: 400px; position: relative; } .stats > article{ text-align: center; position: absolute; top: 100px; right: 0; left: 0; } .stats > article > h1{ font-size: 48px; color: #f46208; } .stats > article > p{ margin-top: 20px; font-size: 14px; } .stats > .icon{ margin-top: 300px; margin-left: auto; margin-right: auto; width: 400px; } .stats > .icon > div{ float: left; text-align: center; width: 100px; } </style> </head> <body> <section class="stats"> <article> <h1>Stats</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br/>sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> </article> <div class="icon"> <div><img src="img/stats1.jpg" alt=""><br/>Margins<br/>12,000</div> <div><img src="img/stats2.jpg" alt=""><br/>Completed<br/>5,681</div> <div><img src="img/stats3.jpg" alt=""><br/>Projects<br/>432</div> <div><img src="img/stats4.jpg" alt=""><br/>Customers<br/>86</div> </div> </section> </body> </html> 如果这样弄的话，icon会把article给顶到后面去，我希望把icon放在article的后面。

2017-09-26 20:55:36

点开查看后面1条评论

卡布琦诺 2017-09-27 11:15:53

 .stats>article {
        text-align: center;
        /*这里不要使用绝对定位，绝对定位会脱离文档流，你的代码设置了偏移量，因此他会固定在你设置的这个位置，原本的位置就会被下方的内容占位*/
      /*  position: absolute;
        top: 100px;
        right: 0;
        left: 0;*/
    }
    .stats>.icon {
        /*margin-top: 50px;
        margin-left: auto;
        margin-right: auto;*/
        /*这里将代码合并一下，有利于优化*/
        margin: 50px auto 0;
        width: 400px;
    }

原理给你写在注释中了，你参考理解一下。祝学习愉快！

收起回答