html - 在css中对齐一个固定的元素

Question

我想在中间对齐一张图片。通过给 div 一个宽度和一个 margin: auto; 很容易。但是 div 还应该带有 position: fixed; 属性，但事实证明它们并没有在一起。

这是我的 HTML:

<div class="header_container">
    <div class="header">
        <div class="header_links_icon">
            <a href="https://www.facebook.com target="_blank" class="header_facebook">
                <div class="header_facebook_icon">&nbsp;</div>
            </a>
            <a href="https://twitter.com/" target="_blank" class="header_facebook">
                <div class="header_twitter_icon">&nbsp;</div>
            </a>
        </div>
    </div>
</div>

这是我正在使用的 CSS:

.header_container {
    background-color: black;
    padding-top: 35px;

}

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    margin: auto;
    width: 1440px;
    position: fixed
}

它是 header.png 图像，应该在屏幕中间对齐并固定位置......我怎样才能做到这一点？

Answer 1

您可以修复 header 容器，然后您的 .header 就可以工作了:

.header_container {
    background-color: black;
    padding-top: 35px;
    position: fixed;
    top:0;
    left:0;
    right:0;
}

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    margin: auto;
}

另一种方式是负边距:

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    position: fixed;
    left: 50%;
    margin-left: -720px;
}