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

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

来源：15-2 水平居中设置-定宽块状元素

抹茶酱sama

2016-08-17 16:59

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

写回答关注

7回答

土豪码农

2016-09-02 17:48:34

已采纳

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

0 0
慕粉3917843

2016-09-28 12:06:47

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

1 0

抹茶酱sam...

嗯谢谢是因为text-align的问题

2016-12-07 13:02:15

共 1 条回复 >
精慕门4127614

2016-08-24 17:35:59

div{
border:1px solid red;
text-align:center; /*增加一项针对文字的*/
width:500px;
margin:20px auto;
}
原来的代码是针对于块元素来定义的,对块内的文字需要增加text-align:center; 使其块里居中.

1 0

抹茶酱sam...

谢谢盆宇

2016-12-07 13:01:45

共 1 条回复 >
慕粉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>

1 0

抹茶酱sam...

谢谢啦~~

2016-12-07 13:01:14

共 1 条回复 >
慕粉3726277

2016-08-21 18:24:34

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

1 0

抹茶酱sam...

嗯谢谢！

2016-12-07 13:00:37

共 1 条回复 >
字节_

2016-08-17 17:30:07

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

0 1
吾莫伊

2016-08-17 17:25:34

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

1 1

抹茶酱sam...

谢谢你！差点忘了自己提过这个问题了_(:зゝ∠)_ ，

2016-12-07 13:00:06

共 1 条回复 >