我已经搜索了几个小时，但似乎无法弄清楚。
我想将菜单置于页眉 Div 底部的中心位置，但它似乎要么将其居中但保持在顶部，要么将其保持在底部但不居中。
我相信这与 position:relative/absolute 有关。
这是 HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Transport2000</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Transport, mobilier, moloz etc." />
<meta name="keywords" content="transport, chican, marfa, duba, bucuresti, romania, transport bucuresti, " />
<meta name="author" content="Iulian" />
<style type="text/css" media="all">@import "css/master3.css";</style>
<style type="text/css" media="all">@import "css/master3.css";</style>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="header">
<!--<h1><img src="images/header/banner.png" alt="Transport2000" /></h1>-->
<div id="menu">
<dt id="acasa">
<a href="index.htm">Acasa</a></dt>
<dt id="galerie">
<a href="galerie.htm">Galerie</a></dt>
<dt id="contact">
<a href="contact.htm">Contact</a></dt>
</div>
</div>
<div id="container">
<!--<div id="menu">
<ul>
<li><a href="#">Acasa</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Contact</a></li><br>
</ul>
</div>-->
<div id="content">
<div class="padding">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur ultricies
scelerisque erat eu mattis. Duis lacinia,
ante non adipiscing euismod, dui lorem
adipiscing turpis, et convallis leo orci
ac ligula. Proin porta risus id tortor aliquet
sollicitudin. Sed suscipit blandit nisi, ac
laoreet nulla ultrices sed. Curabitur velit
enim, eleifend nec faucibus vitae, imperdiet
eget lectus. Suspendisse quis ligula urna.
Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Quisque hendrerit nisl eu nibh facilisis in
rutrum elit tempor. Praesent vel nisi quis
justo sodales elementum.</p>
<p>Fusce felis dui, pharetra vel condimentum
sed, elementum non nisl. Maecenas condimentum
pretium augue, non rhoncus magna hendrerit at.
Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Etiam
euismod laoreet sollicitudin. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Donec tempor
adipiscing nibh, a dignissim nunc rutrum in. Donec
ut nulla neque. Aenean mi sapien, pulvinar a
interdum in, fringilla pharetra turpis. Aliquam
aliquet volutpat imperdiet. Integer eu magna purus,
id mattis tortor. Suspendisse porttitor ligula
vitae erat pellentesque auctor. Vivamus non
interdum urna. Duis fermentum venenatis turpis,
at vestibulum mauris ultricies vel. Aliquam in
arcu in orci rutrum condimentum vel at ipsum.
Pellentesque scelerisque eleifend ipsum, at
scelerisque eros condimentum eu. Phasellus
ante metus, fermentum id lobortis id, rutrum
id magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur ultricies
scelerisque erat eu mattis. Duis lacinia,
ante non adipiscing euismod, dui lorem
adipiscing turpis, et convallis leo orci
ac ligula. Proin porta risus id tortor aliquet
sollicitudin. Sed suscipit blandit nisi, ac
laoreet nulla ultrices sed. Curabitur velit
enim, eleifend nec faucibus vitae, imperdiet
eget lectus. Suspendisse quis ligula urna.
Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Quisque hendrerit nisl eu nibh facilisis in
rutrum elit tempor. Praesent vel nisi quis
justo sodales elementum.</p>
</div>
</div>
</div>
<div id="footer">
<div id="copyright">
Copyright © 2013 Blahzx Designs<br />
</div>
</div>
</body>
</html>
这是 CSS:
html, body {
margin: 0px;
padding: 0px;
}
body {
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 15px;
color: #ffffff;
text-align: center;
background-image:url('bg.png');
background-color:#FFFFFF;
background-repeat: repeat;
}
h1 {
margin: 0;
padding: 0;
text-align: center;
}
#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#container {
width: 960px;
margin: auto;
text-align: left;
}
#header {
width: 100%;
height:141px;
position: relative;
background-image:url('top.png');
background-repeat: repeat-x;
}
#header-content { position: absolute; bottom: 0; }
/* Menu */
#menu { height: 30px;
width: 639px;
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
position: absolute;
bottom: 0; }
#menu dl { margin: 0; padding: 0; }
/* IE5 Mac Hack \*/
#menu { padding-left: 0; }
/*/
#menu { padding-left: 100px; overflow: visible; }
/* End Hack */
#menu dt { float: left; }
#menu dt a {
display: block;
height: 0px !important;
height /**/:44px; /* IE 5/Win hack */
padding: 30px 0 0 0;
overflow: hidden;
text-align: center;
background-repeat: no-repeat;
}
#menu dt a:hover {
}
#menu dt#acasa,
#menu dt#acasa a {width: 182px; background-image: url(../images/menu/acasa.png); }
#menu dt#acasa a:hover {width: 182px; background-image: url(../images/menu/acasa_on.png); }
#menu dt#galerie,
#menu dt#galerie a { width: 221px; background-image: url(../images/menu/galerie.png); }
#menu dt#galerie a:hover {width: 221px; background-image: url(../images/menu/galerie_on.png); }
#menu dt#contact,
#menu dt#contact a { width: 236px; background-image: url(../images/menu/contact.png); }
#menu dt#contact a:hover {width: 236px; background-image: url(../images/menu/contact_on.png); }
#content {
width:960px;
margin-right:280px;
line-height:18px;
}
#content a {
color: #FFFFFF;
text-decoration: none;
}
#content a:hover {
color: #CC00FF;
text-decoration: none;
}
#content .padding {
padding: 25px;
}
#footer {
width:auto;
height:137px;
clear: both;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
text-align: center;
background-image:url('bot.png');
background-repeat: repeat-x;
}
#footer a {
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
color: #ffd800;
}
#footer #altnav {
clear: both;
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}
#footer #copyright {
padding-top: 110px;
}
谢谢!
编辑:我已经添加了整个代码。
最佳答案
#menu {
height: 30px;
width: 639px;
text-align: center;
position: absolute;
bottom: 0;
left:50%;
margin:0 0 0 -320px; /* left 50% PLUS margin top 0 right 0 bottom 0 left (halfwidth) makes sure it fits different screen*/
}
尝试将 margin left 和 right 都设置为 "auto"以使其居中，而不是 margin: 0 auto; <- 将其设置在左侧。
由于您在其他地方可能会与这些冲突，因此包含“!important”声明，它将覆盖之前或之后的样式表中的相应声明。
关于css - DIV 内的 HTML/CSS 中心 DIV，绝对/相对问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17776369/