0

我是一个没有经验的 HTML 学习者，所以请多多包涵。

<div>即使调整大小，我也试图让(#banner) 留在浏览器的中心；所以我想我需要另一个<div>作为整个浏览器的#container。

#banner需要将其宽度扩展 100%，所以我不得不使用绝对位置。

尽管我已经在 stackoverflow 中查看了其他几篇文章 - 我不知道如何针对我的特定案例实施他们的解决方案。

HTML

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div>
   <div id="banner">
   </div>
</div>
</body>
</html>

CSS

#container{

}
#banner{
    background-color: #e51400;
    height: 400px;
    position: absolute;
    left: 0px;
    right: 0px;
    font-weight: bold;
    text-align: center;
    vertical-align:middle;
}

这基本上是我想要完成的 在此处输入图像描述

除了#banner 之外，我真的需要另一个<div>才能把它放在中心吗？

4

1 回答 1

1

好吧，由于我得到了大量的回复，我能够回答我自己的问题。无论如何，多亏了这个页面 ，我能够在这种情况下将代码调整为我需要的方式。

这是我的最终代码：

CSS

 #container {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  overflow: visible;
  background-color:black;
}

#banner {
  height: 400px;
  position: absolute;
  top: -200px; //needs to the negative value of half the height
  left: 0px;
  right: 0px;
  background-color:red;
}
于 2012-06-14T03:52:23.390 回答