所以我在我的网站上使用 Dreamweaver，我有一个名为“Page”的 div，我使用它的最小宽度为 1000 像素并位于屏幕中心。目前，页面 div 内的所有内容都在我的屏幕上居中，但在另一个屏幕上它更偏左。我如何在页面 div 中获取每个单独元素的左属性(或等效属性)以将边缘视为页面 div 的边缘而不是浏览器窗口的边缘？
我的代码片段:#Title 和#Home 是页面 div 内的菜单项。
body {
background: url(../images/background-texture%20d.jpg);
}
#page {
z-index: 1;
width: 1000px;
min-height: 1257px;
margin-left: auto;
margin-right: auto;
}
#title {
z-index: 4;
position: absolute;
top: -10px;
left: 0px;
margin: 0;
}
#Home {
z-index: 4;
position: absolute;
top: 0px;
left: 694px;
width: 89px;
height: 65px;
margin: 0;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
HTML code
<!doctype html>
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="page">
<div id="TopLinks">
</div>
<div id="HeaderContainer">
<img src="images/title g-u5076.png" id="title">
<div id="Home">
<a href="/">HOME</a>
</div>
<div id="Guides">
<a href="/">GUIDES</a>
</div>
<div id="Forum">
<a href="/">FORUM</a>
</div>
<div id="Blog">
<a href="/">BLOG</a>
</div>
<div id="Guilds">
<a href="/">GUILDS</a>
</div>
<div id="Play">
<a href="/">PLAY NOW</a>
</div>
</div>
<div id="Top-Gradient">
</div>
<div id="PictureContainer-top">
</div>
</div>
</body>
</html>
最佳答案
我认为您错过了制作菜单的想法。因此，为了向您展示菜单以及如何居中的最佳实践，我为您制作了一个 JSFiddle
HTML:
<nav>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">GUIDES</a></li>
<li><a href="">FORUM</a></li>
<li><a href="">BLOG</a></li>
</ul>
</nav>
CSS:
ul{
/*Reset margin and padding of ul*/
margin:0;
padding:0;
/*Give fixed width needed for centering*/
width:200px;
/*Center the list*/
margin:0 auto;
/*Background to show what's centered*/
background:#999;
/*Center text if you really want things centered as much as possible*/
text-align:center;
}
li{
display:block;
}
所以真正发生的是你有一个 <nav>与 <ul>在里面。 ul代表Unordered List这些通常用于制作菜单。 ul有一些 List Items <li>带有 anchor 标记以使链接有效。当你想要页面居中的东西时，你必须给元素一个固定的。否则它不会工作。
这里真正有用的是 margin: 0 auto;其中 0代表 height和 auto代表 width . width会自动计算并以此方式居中。
我在您的代码中还注意到，您所有的 div 都有一个位置 absolute如果这是故意的并且确实需要，请查看 this post他们在哪里解释如何居中absolute定位divs .
希望这对您有所帮助，您会找到一种方法来按照您的想法实现菜单。
关于html - Div 元素的定位问题并将它们居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28750243/