html - 我如何使我的所有内容以 html 为中心

Question

我开始为我的网页设计课制作一个页面，但遇到了一个问题。到目前为止，我的页面有一个导航栏和一张图片。我想使用 css 将它们都居中。

display: block;
margin-left: auto;
margin-right: auto

我将它用于我的导航栏和我的 img。即使页面被调整大小，我也希望导航栏始终位于图像上方。无论如何在css中可以做到这一点？

Answer 1

如果元素有宽度，边距将居中。所以你的CSS可能看起来像：

img{
    width:300px;
    margin: 0 auto;
}

nav{
    width:600px;
    margin: 0 auto;
}

基本的html：

<nav>
    <ul>
        <li>Something</li>
        <li>Something else</li>
    </ul>
</nav>
<img src="../path-to-file.jpg" alt="image">

这将使这两个元素居中。

至于使导航始终位于图像上方……您的意思是要重叠吗？或者只是“高于”你的问题高于这个答案的方式？

如果你说清楚，我可以更新这篇文章。

Answer 2

回答“我希望导航栏始终位于图像上方，即使页面被调整大小。无论如何在 css 中这样做吗？”

使用 z-index 属性http://www.w3schools.com/cssref/pr_pos_z-index.asp

如果您希望导航栏保持在顶部使用position: absolute