如何使得6个内容居中显示？

如何将红色container区域里的东西（6个）居中显示？

<head>

<style>

*{margin:0px;

padding:0px

}

.container{

width:1200px;

margin:0px auto;

border:1px red solid;

}

.container .one .t1{float: left; margin:0px 20px 20px 20px;border:1px solid gray;}

.container .one .t2{float: left;margin:0px 20px 20px 20px;border:1px solid gray;}

.container .one .t3{float: left;margin:0px 20px 20px 20px;border:1px solid gray;}

.container .two .t1{float: left; margin:0px 20px 20px 20px;border:1px solid gray;}

.container .two .t2{float: left;margin:0px 20px 20px 20px;border:1px solid gray;}

.container .two .t3{float: left;margin:0px 20px 20px 20px;border:1px solid gray;}

.clear{clear:both;}

p{padding-left:10px}

.one{padding: 20px 20px 5px 20px;}

.two{padding: 0px 20px 10px 20px;}

</style>

</head>

<body>

<p>welcome to mooc!</p>

</div>

<p>welcome to mooc!</p>

</div>

<p>welcome to mooc!</p>

</div>

</div>

<p>welcome to mooc!</p>

</div>

<p>welcome to mooc!</p>

</div>

<p>welcome to mooc!</p>

</div>

</div>

</body>

</html>

芡緞 2020-01-20

源自：float浮动 3-1 Float案例演示（1）

收起

2回答

好帮手慕慕子 2020-01-23 08:42:51

同学你好，你说的这种不可以实现，

老师是以 3-4练习题的要求给出的解决方案，实现图片间距和图片与边框之间的间距都相等，

同学如果觉得图片中间的间距太大，可以适当调整外层盒子的宽度，重新计算一下即可。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕慕子 2020-01-21 10:00:18

同学你好，需要通过计算设置每个盒子的间距，实现所有空白间距都相等。

示例：盒子总宽度1200减去三个小盒子占据的总宽度242*3，得到剩余空间为474。一共有4处空白，每一处空白为： 474/ 4 = 118.5，直接给小盒子设置左边距就可以实现居中效果了

建议：去掉one和two盒子的padding值，将所有相同的样式代码，使用组合选择器写在一起，简化代码书写。

效果图：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者芡緞 #1

可是这样中间两列的空白就会很多，并不是我希望得到的效果，是否可以左右两边的空隙自适应，中间物体和物体之间的距离由我自己设置？不知道left：0 right：0 margin：0 auto这样是否可行？即把六个格子当作一个整体，这个整体要在红色的框子中居中显示？

2020-01-22 18:10:35