Question

我想将一个div放在标题内部，它是100％宽度。需要居中的div具有物理宽度和高度。我已尝试使用绝对位置，但在调整屏幕大小时，div将保持居中。我希望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/

Answer 1

简单的解决方案是进行text-align：center。

#banner{
  text-align: center;
}

http://jsfiddle.net/U3Hpa/

Answer 2

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

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

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

Answer 3

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

通过手动定义左侧位置和边距，无论您的其他div的大小如何，您都可以使浏览器执行此操作。

边距中的自动功能会自动将div相对于标题

居中

Answer 4

试试这个：

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

Answer 5

你应该试试这个：

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

CSS - 将div修复到顶部中心

5 个答案: