我正在开发一个供个人使用的网站，并开发了一个醒目页面。我有几张带有一些线条的图像，可以将页面分开一点。 Here is the splash page.
我遇到的主要问题是我在 CSS 中使用了绝对位置作为每个元素的位置。显然，根据观众使用的屏幕，它会位于左/右，而不是中间。我想到了使用中心起点并使用相对定位。那是正确的下降方式吗？
无论屏幕分辨率如何，是否有一种特定的方法可以使元素居中并处于“队列”中？
HTML
<DOCTYPE html>
<html>
<head>
<title>Daniel Hopkins Personal Website</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="hr_top"> </div>
<div class="hr"> </div>
<div class="hr_bot"> </div>
<center>
<div class="logo">
<img src="logo.png"/>
</div>
<div class="logoname">
<img src="logoname2.png"/>
</div>
<div class="enter"><b><a href"home.html">Enter</a></b>
</div>
</body>
</html>
CSS
body {}
.hr {
width:2px;
height:350px;
background-color:#000000;
position:absolute;
top:140px;
left:884px;
z- index:10;
background: -webkit-linear-gradient(white, black, white);
}
.logo {
position:absolute;
top:200px;
left:640px;
z-index:10;
}
.logoname {
position:absolute;
top:260px;
left:900px;
z-index:10;
}
.hr_top {
width:600px;
height:2px;
position:absolute;
top:180px;
left:640px;
z-index:10;
background: -webkit-linear-gradient(left, white, black, white);
}
.hr_bot {
width:600px;
height:2px;
background-color:#000000;
position:absolute;
top:442px;
left:640px;
z-index:10;
background: -webkit-linear-gradient(left, white, black, white);
}
.enter {
position:absolute;
top:400px;
left:910px;
z-index:10;
font-size:22px;
font-variant:small-caps;
font-style:bold;
font-family:Helvetica;
color:black;
}
a:link {
text-decoration:none;
color:#000000;
}
/* unvisited link */
a:visited {
text-decoration:none;
color:#000000;
}
/* visited link */
a:hover {
text-decoration:underline;
color:#000000;
}
/* mouse over link */
a:active {
text-decoration:underline;
color:#000000;
}
/* selected link */
最佳答案
将所有要居中的元素放在一个容器 div 中，然后定位容器 div。然后您可以根据需要在其中放置其他元素
#container{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
编辑在评论中重申我们的对话
Here is a jsFiddle展示我的方法。在您的情况下，它类似于 like this。 ，但您必须自己确定确切的值。
使用这种方法，容器绝对定位在中心，其他元素可以使用像素或百分比相对于容器绝对定位(取决于偏好/如果容器的高度可变百分比会更好)。
如果你想让它也垂直居中，你可以像这样格式化它:
#container {
position: fixed;
height:200px; //whatever you desire it to be
width:200px; //whatever you desire it to be
top: 50%;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
margin-top:-100px;// Half the height of container
}
关于css - HTML/CSS 分区定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17746269/