为了账号安全,请及时绑定邮箱和手机立即绑定

块状元素用text-align:center设置居中不起作用吗,那为什么15-1中div起作用了嘛,div难道不是块状元素?请看下面代码(或15-1代码)

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>定宽块状元素水平居中</title>

<style type="text/css">

div{border:1px solid red;margin:20px;}

div{text-align:center;}

</style>

</head>

<body>

<div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示。</div>

<div class="imgCenter"><img src="http://img1.sycdn.imooc.com//52da54ed0001ecfa04120172.jpg" /></div>

</body>

</html>


正在回答

5 回答

楼上正解,我刚实验过,text-align只是让文字元素居中,margin:auto是让整个边框加文字居中

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

你弄混了,text-align是让块状里面的元素(比如文字)居中或者上下移。

而这个margin是直接让块状 居中

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

块状是起作用的,行内元素是不起作用的.

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


<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>定宽块状元素水平居中</title>

<style type="text/css">

.txtCenter{border:1px solid red;text-align: center;}

.imgCenter{text-align: center;}

</style>

</head>

<body>

<div class="txtCenter">

<div class="noCenter" style="width:100px;height:100px;border:1px solid blue"></div>

</div>

<div class="imgCenter">

<div>

<img src="http://img1.sycdn.imooc.com//52da54ed0001ecfa04120172.jpg" />

</div>

</div>

</body>

</html>

你跑一下这段代码,应该就明白了


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

http://img1.sycdn.imooc.com//55dad4b40001d62a15960418.jpg跑了一下你的代码,你说的是这样的居中吗


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

孤行者andy 提问者

对呀!
2015-08-24 回复 有任何疑惑可以回复我~
#2

qq_听说_0 回复 孤行者andy 提问者

那哪里有问题呢?
2015-08-24 回复 有任何疑惑可以回复我~
#3

孤行者andy 提问者 回复 qq_听说_0

15-2章说块状元素用text-align:center设置居中不起作用,但是上面代码中不是起作用了吗
2015-08-24 回复 有任何疑惑可以回复我~
#4

卢卡m 回复 孤行者andy 提问者

你把块状元素设定一个宽度,就会发现块状元素无法居中,你居中的是行内的文本。
2015-08-26 回复 有任何疑惑可以回复我~
#5

慕慕8017193 回复 孤行者andy 提问者

text-align:center一般是用来规定文本和内联元素的水平居中对齐。img是内联元素
2018-05-22 回复 有任何疑惑可以回复我~
查看2条回复

举报

0/150
提交
取消

块状元素用text-align:center设置居中不起作用吗,那为什么15-1中div起作用了嘛,div难道不是块状元素?请看下面代码(或15-1代码)

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信