如果有两个盒子,怎么一起水平居中?

如果有两个盒子,怎么一起水平居中?

举个例子,我们设置一个盒子的时候说居中可以用margin:0px auto;

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

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

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

同学你好,问题解答如下:

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

http://img1.sycdn.imooc.com//climg/5e75ab0109ef56b211411082.jpg

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

http://img1.sycdn.imooc.com//climg/5e75aaec0945de5307590708.jpg

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

http://img1.sycdn.imooc.com//climg/5e75aba20969c6a707370979.jpg

http://img1.sycdn.imooc.com//climg/5e75abcb094d2ecd19330705.jpg

这样还是存在间隙的,可以在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

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

<!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>

http://img1.sycdn.imooc.com//climg/5e757c87091811e025590633.jpg

自己测试下,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师