目前，我在这个 body div 的左侧和右侧有两个 div，我正在尝试将一个 div 放在中间并与其他 div 处于相同的高度。我可以将它放在它们之间的中心，但是当我发布它并查看它时，它低于或远高于其他 div，并且不会保持与它们相同的高度。有什么建议么？我还删除了左侧 div 内的许多功能，因为没有必要保持代码较短。
#bod{
background-color:darkred;
height:500px;
width:90%;
margin:auto;
border:3px solid black;
border-radius:25px;
}
#left{
background-color:tan;
height:400px;
width:155px;
overflow:none;
border-radius:15px;
border:3px solid black;
margin-left:7px;
margin-top:50px;
animation-name:Curver;
animation-duration:4s;
animation-iteration-count:infinite;
animation-direction:alternate;
float:left;
margin-left:10px;
}
#cen{
background-color:tan;
width:455px;
height:400px;
border:3px solid black;
border-radius:15px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
position:absolute;
border:3px solid black;
border-radius:15px;
left:0;
right:0;
bottom:0;
top:0;
float:left;
}
#right{
background-color:tan;
height:400px;
width:155px;
margin-top:50px;
margin-right:7px;
float:right;
border-radius:15px;
animation-name:Curver;
animation-duration:4s;
animation-iteration-count:infinite;
animation-direction:alternate;
border:3px solid black;
}<!DOCTYPE html>
<html>
<head>
<title> Formal CSS Project </title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
<div id="innerheader">
<h1>
Sample
</h1>
</div>
</div>
<center> <ul id="nav">
<li><a href="Exe.com">Home</a></li>
<li><a href="Exe.com">Photos</a></li>
<li><a href="Exe.com">Statistics</a></li>
<li><a href="Exe.com">Chat</a></li>
<li><a href="Exe.com"> Biography </a></li>
</ul>
</center>
<div id="bod">
<div id="left">
<h1>
Our Goals
</h1>
<ul>
<li> <a href="Exe.com">Achieve</a></li>
<li> <a href="Exe.com">Be Amazing</a> </li>
<li><a href="Exe.com"> Succeed </a> </li>
<li><a href="Exe.com"> Support </a> </li>
</ul>
</div>
<div id="cen">
</div>
<div id="right">
</div>
</div>
</body>
</html>最佳答案
请添加相对于父 div 的位置。
#bod{
background-color:darkred;
height:500px;
width:90%;
margin:auto;
border:3px solid black;
border-radius:25px;
position: relative;
}
#left{
background-color:tan;
height:400px;
width:155px;
overflow:none;
border-radius:15px;
border:3px solid black;
margin-left:7px;
margin-top:50px;
animation-name:Curver;
animation-duration:4s;
animation-iteration-count:infinite;
animation-direction:alternate;
float:left;
margin-left:10px;
}
#cen{
background-color:tan;
width:455px;
height:400px;
border:3px solid black;
border-radius:15px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
position:absolute;
border:3px solid black;
border-radius:15px;
left:0;
right:0;
bottom:0;
top:0;
float:left;
}
#right{
background-color:tan;
height:400px;
width:155px;
margin-top:50px;
margin-right:7px;
float:right;
border-radius:15px;
animation-name:Curver;
animation-duration:4s;
animation-iteration-count:infinite;
animation-direction:alternate;
border:3px solid black;
}<!DOCTYPE html>
<html>
<head>
<title> Formal CSS Project </title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
<div id="innerheader">
<h1>
Sample
</h1>
</div>
</div>
<center> <ul id="nav">
<li><a href="Exe.com">Home</a></li>
<li><a href="Exe.com">Photos</a></li>
<li><a href="Exe.com">Statistics</a></li>
<li><a href="Exe.com">Chat</a></li>
<li><a href="Exe.com"> Biography </a></li>
</ul>
</center>
<div id="bod">
<div id="left">
<h1>
Our Goals
</h1>
<ul>
<li> <a href="Exe.com">Achieve</a></li>
<li> <a href="Exe.com">Be Amazing</a> </li>
<li><a href="Exe.com"> Succeed </a> </li>
<li><a href="Exe.com"> Support </a> </li>
</ul>
</div>
<div id="cen">
</div>
<div id="right">
</div>
</div>
</body>
</html>关于html - 如何保持居中和对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33991639/