text-align：center not working
[英]text-align: center not working
問題描述
我試過尋找答案但沒有任何效果。 我試圖對齊一個段落。 我很確定沒有什么能覆蓋CSS中的代碼。 這是HTML和CSS：
body { background-image: url("../../images/pic01.jpg"); background-repeat; } #main { background-color: rgb(255, 84, 0); width: 75%; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: auto; overflow: auto; height: 100%; color: rgb(255, 255, 255); } #center { text-align: center; }
<body id="top"> <div id="main"> <p id="center"> <h1> TEST </h1> </p> </div> </body>
這里有什么錯誤？
5 個解決方案
解決方案1
10 已采納 2016-12-14 18:39:19
text-align: center影響純文本節點以及具有display: inline;子元素display: inline; 或display: inline-block; 。 您假定的子元素是h1 ，默認情況下display: block; 。 所以，即使它被允許在p內部有一個h1 ，這仍然不起作用（例如，如果你用<div id="center">替換<p id="center"> ，你仍然會運行進入“非工作”中心）。
p只能有所謂的短語內容 ，也就是說，只允許某些元素作為段落中的子元素。
使用任何流內容元素（例如h1 ）會導致“周圍” p標簽的自動關閉 。 這就是您的瀏覽器真正呈現的內容：
<div id="main">
<p id="center"> </p>
<h1> TEST </h1>
</div>
最后一件事，因為你說你是前端問題的初學者：
不要在CSS中使用#id選擇器。 總是使用CSS .class es。 當你進一步發展時，請閱讀這里的原因： http ： //oli.jp/2011/ids/
解決方案2
2 2016-12-14 18:46:16
對於text-aling: center to work你還必須傳遞margin: auto選項。
解決方案3
2 2016-12-14 18:50:46
您的HTML無效。 <p>不能包含<h1> 。 大多數瀏覽器會嘗試通過關閉標題之前的段落來糾正錯誤，然后在其后創建另一個段落。
您可以刪除標題或段落，並根據需要使用CSS進行樣式設置。
解決方案4
0 2016-12-14 18:37:31
將text-align: center為#main h1 ，如：
#main h1 {
text-align: center;
}
雖然您在
<p>使用了<h1>，這是一個無效的HTML，並且您的瀏覽器在啟動<h1>之前關閉<p></p>處理它。
看看下面的代碼：
#main h1 { text-align: center; } body { background-image: url("../../images/pic01.jpg"); background-repeat; } #main{ background-color: rgb(255, 84, 0); width: 75%; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: auto; overflow:auto; height:100%; color: rgb(255, 255, 255); } #center { text-align: center; }
<html> <head> <title>HTML PAMOKOS</title> <link rel="stylesheet" href="../assets/css/html.css" /> </head> <body id="top"> <div id="main"> <p id="center"></p> <h1> TEST </h1> </div> </body> </html>
希望這可以幫助！
解決方案5
-1 2016-12-14 19:02:58
body { background-image: url("../../images/pic01.jpg"); background-repeat; } #main{ background-color: rgb(255, 84, 0); width: 75%; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: auto; overflow:auto; height:100%; color: rgb(255, 255, 255); } #center { text-align: center; } h1{ text-align: center; }
<!DOCTYPE HTML> <html> <head> <title>HTML PAMOKOS</title> <link rel="stylesheet" href="../assets/css/html.css" /> </head> <body id="top"> <div id="main"> <p id="center"> <h1> TEST </h1> </p> </div> </body> </html>
text-align：center not working
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.