-1

我试图在我的网页上居中导航栏。我的最小宽度为 945px，如果超过该宽度，则为屏幕的 50%。我现在希望它居中，所以我将它向左移动 50%，但随后我需要调整边距。我如何编码宽度/ 2？

#navBarImg {
    position:absolute;
    left:50%;
    width:50%;
    margin-left:-(width/2);
    top:50px;
    z-index:2;
    min-width:945px;
}

<body>

<div id="container">
<div id="navBar">
<img id="navBarImg" src="../Navigation/navBarBGImg.png" />
<img id="navBarLogo" src="../Navigation/navBarLogo.png" />
<div id='navMenuPart1' class="navMenu">
<ul>
   <li><a href='#'><span>Research</span></a></li>
   <li><a href='#'><span>Team</span></a></li>
   <li><a href='#'><span>News</span></a></li>
   <li><a href='#'><span>Courses</span></a></li>
   <li><a href='#'><span>Outreach</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>

</body>
</html>
4

4 回答 4

0

使用相对定位的元素，浏览器可以自动居中水平轴。您只需使用margin:auto;. 请记住，这将使元素相对于其容器元素自动居中。所以，这里很多人搞砸的事情是容器元素没有定义的宽度，因此margin:auto;不知道如何渲染，因为它是相对于父元素的。

编辑

此外，an<img>是一个行内块元素。您需要将其设为块级元素margin:auto;才能正常工作。你可以这样做display:block;。

一个工作示例。

#navBarImg {
    position:relative;
    display:block;
    min-width:50px;
    width:50%;
    margin:auto;
    border:1px solid black;
}
于 2013-07-17T23:18:11.953 回答
0

将您的 margin-left 和 margin-right 设置为 auto ，它将使 div 居中（也取左侧：50%）。如果这不起作用，请在 jsfiddle.net 上发布您的代码

于 2013-07-17T21:51:02.283 回答
0 
#navBarImg {
    position:relative;
    width:50%;
    margin: 1em auto;
    z-index:2;
    min-width:945px;
}

通过边距值而不是顶部来满足您的缓冲需求。相对定位+自动边距就可以了。

编辑结构：

  #navMenuPart1 {
        position:relative;
        margin: 1em auto; // adjust top / bottom to suit
        top:50px;
        z-index:2;
        min-width:945px;
        background : url("../Navigation/navBarBGImg.png") no-repeat;
    }
#navBarLogo {
     position:relative;
     display:block;
     float: left // your choice
     margin: auto // top right bottom left - use this to position it
     clear:both;
}

    <body>

    <div id="container">
    <div id="navBar">
    <div id='navMenuPart1' class="navMenu">
    <ul>
       <li><a href='#'><span>Research</span></a></li>
       <li><a href='#'><span>Team</span></a></li>
       <li><a href='#'><span>News</span></a></li>
       <li><a href='#'><span>Courses</span></a></li>
       <li><a href='#'><span>Outreach</span></a></li>
       <li><a href='#'><span>Contact</span></a></li>
    </ul>
    <img id="navBarLogo" src="../Navigation/navBarLogo.png" />
    </div>
    </div>
    </div>
    </body>
    </html>

所以这里的目的是为您的导航栏图像使用背景图像属性。将接口 UL 和徽标放在上面。徽标“漂浮”在那个空间中。现在取决于您的 UL css - 上面可能与您的 UL 有一些布局冲突，但我认为这说明了一种更好的方法

于 2013-07-17T21:51:14.353 回答
0

这确实有效，

width:50%;
min-width:945px;
margin:auto;
position:relative;
top:50px;

但是使用相对定位本质上是“使用”可见位置以及原始位置。为了解决这个问题，你需要以某种方式包含它。我假设这个导航栏是水平的（因为它很宽）。您还提到了一个徽标，该徽标需要可见。

将徽标和导航栏包装在“标题” div 或其他内容中（如果您已经这样做，则需要对标题中除导航栏以外的所有内容进行另一层包装），并将该 div 设置为position:relative;width:100%，并给它导航栏的高度加上其他需要进入的内容。然后给导航栏

position:absolute; /* Absolutely positioned, relative to its container */
bottom:0;
right:50%
margin-right:-25%; /* OR -472.5px */

您不能同时拥有“自动”外观的边距和可缩放的宽度。因此，使用 -25%（可缩放宽度的一半）适用于大于项目宽度两倍的显示，而 -472.5px（最小宽度的一半）适用于小于两倍的显示。

更新：回应您在评论中的新链接：您给出#page100% 的宽度 - 但 100%是什么？为了给它一个相对于其父级的宽度，必须定义父级宽度。

我建议添加一条规则，例如html, body{width:100%}（我也倾向于将边距设置为零，因为我不喜欢在每页顶部创建的自动边距）。这会将这些元素的宽度设置为窗口的宽度，因此您为这些元素提供的百分比宽度具有参考点。

于 2013-07-17T22:33:04.850 回答