CSS - 修复顶部中心的div

我想将div放在100％宽度的头部中间。需要居中的div具有物理宽度和高度。我尝试过使用绝对位置，但在调整屏幕大小时，div将保持居中。我希望div保持在设计的中心，而不是屏幕。我该如何做到这一点？我也不想使用固定的位置。CSS - 修复顶部中心的div

CSS：

header{ 
    position: relative; 
    width: 100%; 
    height: 65px; 
    background-color: #662D91; 
} 
#banner{ 
    position: absolute; 
    left: 50%; 
    margin-left: -240px; 
    width: 480px; 
    height: 115px; 
    border-radius: 20px; 
}

HTML：

<header> 
     <div id="banner"> 
      <a href="/index"> 
       <img src="/_images/layout/PentaOneStop_headerLogo.png" class="img-center" /> 
      </a> 
     </div> 
    </header>

编辑：我已经通过将全宽头，这是设计的宽度的标志之间一个div解决了我的问题。它似乎已经解决了我的问题。

我解决我的问题的jsfiddle：http://jsfiddle.net/U3Hpa/2/

来源

2014-04-29 Phorden

制作DIV的左，右页边距'auto'的 – SOReader

可能重复[如何中心在一个div一个div - 水平？]（http://stackoverflow.com/questions/114543/how -to-center-a-div-in-a-div-horizontal） –

@BryanDowning不完全是我正在寻找的东西，因为我已经能够将它居中，只是不希望它以窗口为中心。 – Phorden

#banner{ 
    margin-left: auto; 
    width: 480px; 
    height: 115px; 
    border-radius: 20px; 
}

通过手动定义左侧位置，边距，使浏览器做，不管你是什么其他的div的大小。

自动功能在你的空间将相对股利automatially中心到头部

来源

2014-04-29 21:53:23

简单的解决办法是做文本对齐：中心。

#banner{ 
    text-align: center; 
}

http://jsfiddle.net/U3Hpa/

来源

2014-04-29 21:55:32

试试这个：

header{ 
    position: relative; 
    width: 980px; 
    height: 65px; 
    background-color: #662D91; 
} 
#banner{ 
    position: relative; 
    margin: 0 auto; 
    width: 480px; 
    height: 115px; 
    border-radius: 20px; 
}

来源

2014-04-29 21:57:55

你应该试试这个：

#banner{ 
position: fixed; 
left: 50%; 
margin-left: auto; 
margin-right: auto; 
width: 480px; 
height: 115px; 
border-radius: 20px; 
}

来源

2014-04-29 21:58:09 Colum

我解决我的问题，通过增加另一个DIV那是头元素的子但#banner的父母。然后将其设置为980像素的宽度（与内容容器的宽度相同），并将其设置为margin: 0 auto;。这似乎解决了我的问题。我一直在寻找一个CSS解决方案而不改变HTML标记，但我找不到一个。感谢所有的反馈。

由于小视口，小提琴没有说明最好的解决方案，但代码是准确的。

的jsfiddle：http://jsfiddle.net/U3Hpa/2/

来源

2014-04-29 22:51:39 Phorden

CSS - 修复顶部中心的div

回答

相关问题