个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 12:39:19 25 4
gpt4 key购买 nike

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

我想将菜单置于页眉 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 &#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;
}

谢谢!

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

最佳答案 

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

25 4 0
文章推荐： arrays - 如何快速初始化我的数组
文章推荐： ios - 在同一个 UIViewController 中使用 NavigationDrawerController 和 ToolbarController
文章推荐： javascript - 菜单总是在顶部和水平滚动
文章推荐： html - 位于灯箱内 div 内的图像的 CSS(许多层)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com