0
以下是我的網頁的以下html和CSS代碼。我似乎無法集中標題div中的標題div。我很困惑這個問題是由於定位還是顯示。謝謝。爲什麼margin：auto標籤在「title」div上不起作用？
#header {
position: absolute;
position: block;
width: 100%;
height: 120px;
background-color: #3e8dff;
text-decoration: underline;
top: 0px;
left: 0px;
}
#image {
height: 120px;
width: 150px;
float: left;
}
#image a img {
position: absolute;
height: 120px;
width: 150px;
}
#navBar {
position: absolute;
width: 1500px;
height: 60px;
background-color: #96CDCD;
top: 120px;
left: -15px;
}
#navBar ul li {
position: relative;
list-style-type: none;
float: left;
display: inline-block;
border: 2px solid black;
padding: 5px;
margin-right: 50px;
margin-left: 50px;
font-family: Arial;
font-size: 1.5em;
bottom: 5px;
background-color: blue;
}
#top_left {
float: left;
position: absolute;
top: 190px;
left: 0px;
width: 48%;
height: 500px;
border-radius: 5px;
background-color: #00FA9A;
}
#top_right {
float: right;
position: absolute;
top: 190px;
width: 50%;
right: 0px;
height: 500px;
border-radius: 5px;
background-color: #40E0D0;
opacity: .7;
}
#bot_left {
position: absolute;
clear: both;
height: 500px;
width: 48%;
border-radius: 5px;
background-color: yellow;
top: 700px;
left: 0px;
}
#bot_right {
position: absolute;
float: right;
height: 500px;
width: 50%;
border-radius: 5px;
background-color: purple;
top: 700px;
right: 0px;
}
.simplePar {
display: inline-block;
font-size: 26px;
font-family: Tahoma;
}
#title {
position: absolute;
display: inline-block;
margin: auto;
height: 90px;
width: 500px;
background-color: purple;
}<!Doctype html>
<html>
<head>
<title>Page 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="image">
<a href="http://google.com/">
<img src="C:\Users\Raiyan\Desktop\files for website\google-logo.jpg">
</a>
</div>
<div id="title">
pasa
</div>
</div>
<div id="navBar">
<ul>
<li>Home</li>
<li>Latest News</li>
<li>Buy Tickets</li>
<li>Blog</li>
<li>More Info</li>
<li>Contact us</li>
</ul>
</div>
<div id="top_left">
<p class="simplePar">All of these are under the <span>divs</span>
</p>
</div>
<div id="top_right">
<p class="simplePar">All of these are under the <span>divs</span>
</p>
</div>
<div id="bot_left">
<p class="simplePar">All of these are under the <span>divs</span>
</p>
</div>
<div id="bot_right">
<p class="simplePar">All of these are under the <span>divs</span>
</p>
</div>
<div id="footer"></div>
</body>
</html>
您正在代碼中混合多個定位系統（浮點數，絕對值，內置...）。我可以簡化你的標記嗎？ – Vi100
是的。我仍然在學習，並且非常困惑於何時何地使用定位，顯示和浮動。請給我一些建議，以便我可以清楚地理解它。 @ Vi100 – raiyan106
您的頭文件中有太多html元素，因此最終會出現過多和複雜的css規則以適合您的佈局。一般來說，儘量使用更少的元素來完成你想要的任務，儘量做到「語義」。舉例來看下面的答案。 – Vi100