亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

塊狀元素用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下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號