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;
}

これは基本的に私が達成しようとしていることです ここに画像の説明を入力してください

<div>中央に配置するために、＃banner以外に本当に必要ですか？

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 に答える