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

求助一个关于继承的问题

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

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

代码如下
<!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>

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

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

谢谢大神的帮助
页: [1]
查看完整版本: 求助一个关于继承的问题