如果有两个盒子，怎么一起水平居中？

举个例子，我们设置一个盒子的时候说居中可以用margin：0px auto；

如果有两个盒子先设置宽都是300px，怎么把他们一起设置水平居中，我在这两个盒子外面嵌入了一个div，把这个div用margin：0px auto；显示不出来，老师帮忙看一下。

ZZZZZzn 2020-03-20

源自：盒子模型 3-1 width属性

19

收起

4回答

好帮手慕星星 2020-03-21 13:53:41

同学你好，问题解答如下：

1、可以使用inline-block实现显示在一行，显示行内元素默认存在间隙，外层大盒子设置600px宽度不够，子元素会换行显示

需要在大盒子中设置字体大小为0来清除间隙：

2、如果不嵌套大盒子，可以将小盒子设置为行内元素，body中设置文本居中

这样还是存在间隙的，可以在body中设置字体大小为0去除。

自己再测试下，祝学习愉快！

提问者 ZZZZZzn 2020-03-21 10:53:54

还有一个问题，如果这两个盒子外没有镶嵌一个大盒子，怎么让这两个盒子都水平居中。谢谢

提问者 ZZZZZzn 2020-03-21 10:43:37

浮动这里，我可以使用display：inline-block来实现吗？

好帮手慕星星 2020-03-21 10:31:44

同学你好，意思是一个大盒子里面有两个小盒子，两个小盒子水平排列，外面大盒子水平居中是吗？可以参考下面代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            /* 大盒子设置固定宽度居中 */
            width: 600px;
            margin: 0 auto;
        }
         
        .one,
        .two {
            width: 300px;
            height: 300px;
            background: red;
            /* 使用浮动显示在一行 */
            float: left;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>
 
</html>

自己测试下，祝学习愉快！

相似问题

盒子水平居中问题

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

对于top/bottom来说是不是不适用只写第一个参数第二个默认居中

老师我的ABOUT区的 ABOUT几个字为什么不能居中

关于背景图片的引入以及垂直居中有一些问题

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

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号