<html><head><meta charset="utf-8"><title>定寬塊狀元素水平居中</title><style>div{? ? border:1px solid red;? ? margin:40px;}.txtCenter{ text-align:center;}div.imgCenter{text-align:center;}</style></head><body><span class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</span><!--下面是任務部分-->這里面我有一個地方不懂，我把原題目中的div.txtCenter改成了.txtCenter，{}里面還是text-align:center,下面的本來應該是“div”的地方，我改成了span，文本為什么不顯示居中效果了呢？？非常不理解，請大神賜教，謝謝
6 回答
已采納
奮斗小青年111
TA貢獻4條經驗 獲得超1個贊
或者
<html>
<head>
<meta charset="utf-8">
<title>定寬塊狀元素水平居中</title>
<style>
div{
??? border:1px solid red;
??? margin:40px;
??? text-align:center;
}
body{
??? text-align:center;
}
span{
border:1px solid red;
margin:40px;
text-align:center;
}
.txtCenter{
text-align:center;
}
div.imgCenter{text-align:center;
}
</style>
</head>
<body>
<span class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</span>
-
鏡子2015這個是對的！
奮斗小青年111
TA貢獻4條經驗 獲得超1個贊
完整代碼可以實現居中
<meta charset="utf-8">
<title>定寬塊狀元素水平居中</title>
<style>
div{
??? border:1px solid red;
??? margin:40px;
??? text-align:center;??
}
.txtCenter{
text-align:center;
}
div.imgCenter{text-align:center;
}
</style>
</head>
<body>
<div><span class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</span></div>
-
鏡子2015這段代碼中間的———— .txtCenter{ text-align:center; } 是沒用的，刪除了也一樣能居中?。?！也不知道為什么，已經操作過了！不能實現文本的居中，但是在div里面的那段代碼“ text-align:center; ”是有用的！
-
鏡子2015又繼續操作了一遍，確實跟內聯元素有關系?。『呛?，我現在都不知道自己原先的代碼是什么了??！算是又拓展了！
-
鏡子2015又摸索了一遍，這段代碼因為在塊狀元素的內部，屬于塊狀內聯元素么？（概念有點淡忘）不能居中，但是把div{ border:1px solid red; margin:40px; text-align:center; } 這段代碼刪除掉，還是能居中的?。“?！摸索了一遍！
鏡子2015
TA貢獻2條經驗 獲得超0個贊
再補充一下，
div{
? ? border:1px solid red;
? ? margin:40px;
? ?text-align:center;
}
我在div選擇器里面加了text-align:center;這段代碼，文本還是不顯示居中效果，為什么？？
- 6 回答
- 0 關注
- 1431 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消