HTML / CSS Div定位
[英]HTML/CSS Div Positioning
问题描述
我正在为个人使用网站，并开发了一个初始页面。 我有几张图片，上面有几行，将页面分成几部分。 这是启动页面。
我遇到的主要问题是，我在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 */
1 个解决方案
解决方案1
1 已采纳 2013-07-19 12:41:52
将所有要居中的元素放在容器div中，并放置容器div。 然后，您可以根据需要在其中放置其他元素
#container{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
编辑在评论中重申我们的对话
这是一个显示我的方法的jsFiddle 。 在您的情况下，它类似于这样 ，但是您必须自己确定确切的值。
使用此方法，容器可以绝对定位在中心，而其他元素可以使用像素或百分比相对于容器绝对定位（取决于首选项/如果容器的高度可变，则百分比会更好）。
如果您希望它也垂直居中，则可以这样设置其格式：
#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
}
HTML / CSS div定位
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.