对齐css中的固定项目答案

【问题标题】：Align a fixed item in css对齐css中的固定项目
【发布时间】：2012-03-29 21:23:38
【问题描述】：

我想在中间对齐图像。通过给 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 图像，应该在屏幕中间对齐并定位固定......我该如何做到这一点？

【问题讨论】：

也许将 .header 包装在一个宽度：1440px 和自动边距的 div 中，从 .header 中删除自动边距，并保持 .header 位置：固定和宽度：100%...？只是猜测......

标签： html css position fixed

【解决方案1】：

您可以修复您的标头容器，然后您的 .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;
}

【讨论】：

【解决方案2】：

您必须将左边的位置设置为百分之五十，将左边距设置为元素宽度的一半。这仅适用于具有固定宽度的项目。

http://jsfiddle.net/W9ZcY/

.header_container {
    background-color: black;
    padding-top: 35px;
    border: 1px solid red;
}

.header {
    border: 1px solid blue;
    background: gray;
    height: 105px;
    left: 50%;
    margin-left: -70px;
    width: 140px;
    position: fixed
}

【讨论】：

【解决方案3】：

问题是您可以使用百分比或像素定位固定元素。他们都不会进行适当的偏移计算以使其真正居中。因此，您必须对展示位置进行排序以使其正常运行。

按百分比定位并以负边距偏移：

//assuming the block is 200px wide and 100px tall
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

或者，您可以通过固定容器的位置将其居中，然后在该容器中居中您的对象（如@rgthree 所述），这也有效。

【讨论】：

【解决方案4】：

这可能会起作用：

.center {width:1440px;margin:0 auto;}

.header {width:1440px;position:fixed;etc...} // don't use margin:auto here

在哪里

 <div class='header_container>
   <div class='center'>
     <div class='header'>
      <!-- contents -->
     </div>
   </div>
 <div>

【讨论】：

【解决方案5】：

您好，您可以将固定位置赋予主 header_container 类，这样就可以了。

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

.header {
    background:green;
    height: 100px;
    width: 500px;
    margin: auto;
}

请看演示：- http://jsfiddle.net/rohitazad/W9ZcY/17/

【讨论】：

【解决方案6】：

在父标题类中固定位置，而不是在标题子类中使用固定位置...

.header_container {        
        position: fixed;
        top:0;
        left:0;
        right:0;

}

【讨论】：