css - HTML/CSS Center DIV inside DIV，绝对/相对问题

Question

我已经搜索了几个小时，但似乎无法弄清楚。

我想将菜单置于 Header Div 的底部，但它似乎要么将其居中但将其保持在顶部，要么将其保持在底部但不将其居中。

它与位置有关：相对/绝对，我相信。

这是 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 &#169; 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;
}

谢谢！

编辑：我已经添加了整个代码。

score 0 · Accepted Answer

我想这就是你想要的:

http://jsfiddle.net/CMVbX/

HTML：

<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>

CSS：

#header {
    width:100%;
    position: relative;
    height:141px;
    background-color:blue;
    background-repeat: repeat-x;
}

/*#header-content { position: absolute; bottom: 0; }*/

/* Menu */

#menu { background-color:red; width:100%; height: 30px; margin: 0 auto; 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); }

score 0 · Accepted Answer

您应该必须声明您只需要设置菜单 div 的宽度并将其边距设置为 auto 的位置，即：

#menu
{
width:80%;
margin-left:auto !important;
margin-right:auto !important;
}

score 0 · Accepted Answer

#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: 0 auto; <- 将其设置在左侧。

由于您可能在其他地方与那些冲突，包含“！important”声明，它将覆盖先前或以后样式表中的相应声明。

css - HTML/CSS Center DIV inside DIV，绝对/相对问题

3 回答 3

Related

Reference