在页面 CSS 上定位元素

Question

我想创建页眉如下：

但是我的虚拟 css-规则得到了什么：

我主要是后端开发人员，但我想深入研究 CSS 和 HTML，这是我的 Html struct, and here are my Css rules，所以有人可以向我解释我需要如何放置这些元素以适当的方式。谢谢！

Answer 1

您可以绝对放置您的标志并设置 顶部、左侧、右侧、底部 属性。绝对定位元素已从自然文档流中移除，您可以通过设置它们的左、上、右、下属性来将它们对齐到任何您想要的位置

例子

<div class="box">

    <div class="inner-box">
    <p>dummy content</p>
    </div>

</div>

Css

.box {
    position: relative;
}

.inner-box {
    position: absolute;
    top: 20px;
    left: 50px;
}

Answer 2

margin: 20px auto;

调整边距也可以帮助您定位事物，第二个值对居中非常有帮助。

Positioning elements on page CSS