                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

这个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

源自：初识HTML(5)+CSS(3)-升级版 15-2

关注问题我要回答

998

操作

收起

7 回答

土豪码农回答被采纳 +3 积分
2016-09-02

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

0 回复有任何疑惑可以回复我~

慕粉3917843
2016-09-28

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

0 回复有任何疑惑可以回复我~

#1

抹茶酱sama 提问者

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

2016-12-07 回复有任何疑惑可以回复我~

精慕门4127614
2016-08-24

div{

border:1px solid red;

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

width:500px;

margin:20px auto;

}

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

0 回复有任何疑惑可以回复我~

#1

抹茶酱sama 提问者

谢谢盆宇

2016-12-07 回复有任何疑惑可以回复我~

慕粉18221508921
2016-08-21

div{

border:1px solid red;

width:500px;

margin:20px auto;

}

.p{text-align:center;}

</style>

</head>

<body>

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

</body>

</html>

0 回复有任何疑惑可以回复我~

#1

抹茶酱sama 提问者

谢谢啦~~

2016-12-07 回复有任何疑惑可以回复我~

慕粉3726277
2016-08-21

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

0 回复有任何疑惑可以回复我~

#1

抹茶酱sama 提问者

嗯谢谢！

2016-12-07 回复有任何疑惑可以回复我~

字节_
2016-08-17

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

1 回复有任何疑惑可以回复我~

吾莫伊
2016-08-17

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

1 回复有任何疑惑可以回复我~

#1

抹茶酱sama 提问者

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

2016-12-07 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1225809 人
解答问题 18234 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

7 回答把width改大一点就不行了是为什么？比如改成500

4 回答Ol居中显示为什么数字不居中。改了块级就居中了。是OL不是块级元素问题吗？

5 回答为什么全屏时就不是居中显示

6 回答为什么显示过了但是就是显示不出绿色？？

1 回答边框是不是没有设置居中显示？

搜索更多本课相关问答

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

我要回答关注问题

意见反馈帮助中心 APP下载