0

我正在开发一个供我个人使用的网站，并开发了一个启动页面。我有几张带有一些线条的图像，可以将页面分开一点。这是启动页面。

我遇到的主要问题是我在 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">&nbsp;</div>
        <div class="hr">&nbsp;</div>
        <div class="hr_bot">&nbsp;</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 */
4

1 回答 1

1

将您想要居中的所有元素放在容器 div 中并定位容器 div。然后您可以根据需要将其他元素放置在其中

#container{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

编辑在评论中重申我们的对话

这是一个 jsFiddle来展示我的方法。在您的情况下，它类似于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
}
于 2013-07-19T12:41:52.810 回答