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

谢谢！

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

Answer 1

我认为这就是你想要的:

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); }

Answer 2

您必须声明您需要设置菜单div宽度所需的位置，并将其边距设置为自动，即：。

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

Answer 3

#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*/
    }

尝试将左边和右边的边距设置为＆＃34; auto＆＃34;中心，而不是保证金：0自动; ＆lt; - 将其设置在左侧。

因为你可能在其他地方与那些人发生冲突，所以包含一个＆＃34;！important＆＃34;声明，它将覆盖先前或后面的样式表中的相应声明。

DIV中的HTML / CSS中心DIV，绝对/相对问题

3 个答案: