[已解决]求助一个关于继承的问题

Qmh · 发表于 2019-7-16 16:17:08

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 Qmh 于 2019-7-16 16:21 编辑

做了一个显示图片的网页，在CSS中定义body标签居中显示，但body标签中的图片并没有居中显示，这是怎么回事？不是有继承性的吗？

代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>无标题</title>
            <style type="text/css">
                body{
                         margin:0 auto;
                         }
                .box{
                        height:400px;
                        width:600px;
                        border-top:groove red 10px;
                        border-left:ridge blue 10px;
                        border-right:inset blue 10px;
                        border-bottom:outset red 10px;
                        background:rgba(0,0,0,0.3);
                        }
                        img{
                                margin-top:30px;
                                }
            </style>
    </head>
        <body>
            <div class="box"></div>
                <img src="./html颜色大全.png" alt="竟然没显示出来[○･｀Д′･ ○]"/>
       </body>
</html>

抱歉没有权限发图片
哪位大佬可以屈尊帮帮萌新？

最佳答案

月排行榜 / 总排行榜

不二如是

2019-7-17 08:03:19

1、这个不是继承问题，而是“行内和块级”元素的区别。

margin：0 auto；可以用来居中是因为：margin 的 auto 属性的作用是用来分配剩余空间，所以对于有剩余空间的元素才有效（块级元素）。

而图片设置 margin: 0 auto 是无效的，因为图片是“内联”元素，不是占一整行，没有剩余空间。

2、用 text-align：center 即可：

body{
            text-align: center;
        }

跳转到最佳答案楼层

Qmh · 发表于 2019-7-16 17:46:34

对了，还有一个问题，怎样悬赏呢？

不二如是 · 发表于 2019-7-17 08:03:19

1、这个不是继承问题，而是“行内和块级”元素的区别。

margin：0 auto；可以用来居中是因为：margin 的 auto 属性的作用是用来分配剩余空间，所以对于有剩余空间的元素才有效（块级元素）。

而图片设置 margin: 0 auto 是无效的，因为图片是“内联”元素，不是占一整行，没有剩余空间。

2、用 text-align：center 即可：

body{
            text-align: center;
        }

Qmh · 发表于 2019-7-17 09:46:39

谢谢大神的帮助

账号		自动登录	找回密码
密码			立即注册