3

幅が固定され、中央に配置されたコンテナがあります。コンテナーの内部には、ウィンドウに対して 2 つの DIV の位置が並んでいます。これらの Div の内部には、中央に配置したい他のコンテンツがあります (できればコンテナーを使用)。

ここに簡略化されたコードがあります: http://jsfiddle.net/jTpGs/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
 #container {
 width: 960px;
 height: 1000px;
 background: red;
 margin: 0 auto;
 }  

#windowdiv {
height: 200px;
background: purple;
padding-top: 20px;
position: absolute;
left: 0;
right: 30%;
top: 25px;
}
#windowdiv2 {
height: 200px;
background: blue;
padding-top: 20px;
position: absolute;
left: 60%;
right: 0;
top: 10px;

}

</style>
</head>
<body>
  <div id='container'>

     <div id='windowdiv'>
        <p>some content</p>
     </div>
     <div id='windowdiv2'>
       <p>some content</p>
     </div>
 </div>
</body>
</html>
4

1 に答える 1

0

これを CSS に追加して、テキストをこれらのボックスの中央に配置します。

​#windowdiv p, #windowdiv2 p {
    ​text-align: center;
    ​height: 100%;
    ​line-height: 180px;   
}​

これは、行の高さを設定しているため、ボックスの高さが固定されていることを前提としています。(200px - 20px (パディングトップ) = 180px)

于 2012-12-19T03:29:42.600 に答える