问答详情
源自：15-2 水平居中设置-定宽块状元素

这个width：200是居中显示的，但是修改为500就没有作用了是为啥

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
div{
    border:1px solid red;
    
    width:200px;
    margin:30px auto;
}

</style>
</head>

<body>
<div>我是定宽块状元素，我要水平居中显示。</div>
</body>
</html>

提问者：抹茶酱sama 2016-08-17 16:59

个回答

  • 土豪码农
    2016-09-02 17:48:34
    已采纳

    因为你居中的是那个框框，也就是盒子，不是文字的居中，文字也要居中要用text-align：center，就会文字居中了

    0
  • 慕粉3917843
    2016-09-28 12:06:47

    可以居中啊 。我这里可以啊

    57eb41ce0001b32f04330305.jpg

    57eb41cf000105a905000126.jpg


    0
  • 精慕门4127614
    2016-08-24 17:35:59

    div{

        border:1px solid red;

    text-align:center;     /*增加一项针对文字的*/

    width:500px;

    margin:20px auto;

    }

    原来的代码是针对于块元素来定义的,对块内的文字需要增加text-align:center;  使其块里居中.

    0
  • 慕粉18221508921
    2016-08-21 22:13:23

    div{

        border:1px solid red;

    width:500px;

    margin:20px auto;

    }

    .p{text-align:center;}

    </style>

    </head>


    <body>

    <div class="p">我是定宽块状元素，我要水平居中显示。</div>

    </body>

    </html>


    0
  • 慕粉3726277
    2016-08-21 18:24:34

    这个定义是针对于定宽块状元素来定义的，在这个文本中也就是针对<div>来进行居中显示的，如果想要盒子和文字同时居中参见行内元素居中

    0
  • 字节_
    2016-08-17 17:30:07

    因为定义块的宽度比文字宽度(大约288px)大得多，

    1
  • 吾莫伊
    2016-08-17 17:25:34

    居中是说盒子居中，不是文字吧，改成500，盒子模型也是居中，200的时候是因为盒子模型短所以看起来像居中了一样。我也是初学者，仅供参考哈。

    1