如何设置中间浮动的盒子居中呢？

王小east 2022-06-28

源自：CSS入门 11-2 浮动

12

收起

1回答

好帮手慕小脸回答被采纳获得+3积分 2022-06-29 10:52:34

同学你好，将中间盒子居中时两边的盒子也需要做出调整，这里同学可参考如下思路实现：

在三列div盒子布局中，最左边和最右边的div盒子可以通过使用float:left靠左和float:right靠右实现左右布局

中间的div盒子要在其左右中间排版，而float没有居中浮动的样式，只有通过float:left和float:right实现居中布局。

这里对最左和中间的div设置float:left对最右的div设置float:right即可实现并列三列布局

注：三列并列居中首先外层要设置一个div盒子，再到此对象里布局3个盒子实现css并列并排。

祝学习愉快~

王小east 提问者 #1

按照老师的代码运行如第一张图(中间盒子宽度是不是应该设置为160px？)。如果想实现中间盒子居中显示，是需要先计算中间盒子宽度实现居中后，再在红色盒子里面嵌套盒子，然后再设置嵌套的盒子居中吗（如第二张图）？

2022-06-29 22:00:26
好帮手慕小脸回复提问者王小east #2

同学你好，
1、这里同学可以自己调整大小，具体上述内容是为了演示中间盒子居中效果的~
2、按照同学这种实现方式也是可以的，但中间盒子居中多数是对第二个div进行调整，很少有这种嵌套
注：将盒子大小统一修改为120px，并将第三个div设置左浮动
祝学习愉快~

2022-06-30 09:48:17

相似问题

如何让文字垂直居中？如何让六个元素居中？

浮动之后居中

怎么让浮动后面的盒子换行呢

视频中的疑问

设置右浮动，又清除右浮动，不应该回到原位置吗？

登录后可查看更多问答，登录/注册

参与学习人
提交作业 8718 份
解答问题 9886 个

综合就业常年第一，编程排行常年霸榜，北上广深月薪过万！不需要基础，无需脱产即可学习，只要你有梦想，想高薪！全新升级：技术栈升级（包含VUE3.0，ES6，Git）+项目升级（前后端联调与功能升级）

本课精华内容

问答作业

eclipse打开弹出这样是怎么回事

79 1

找不到jdk版本号的文件夹，打开里面什么都没有

56 1

Cannot resolve symbol 'Valid'

9 1

spring boot 和swagger2版本冲突

14 1

Maven项目管理中，关于Maven和IDE有几点小疑问。

56 9

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载