11

私は非常に単純な html ページを作成しており、自分のページで次の 2 つのことを行う方法を知りたいです。

  1. コンテナ div があり、コンテナ div をページの中央に配置したいと考えています。
  2. ウィンドウのサイズを変更すると、コンテナ div が拡大および縮小します。

添付のコードを書きましたが、コンテナは常に左側にくっついており、ウィンドウのサイズを変更してもサイズが変わりません。

<title>Demo</title>
<head>This is a demo</head>
<style>
#nav
{
background-color: red;
float: left;
width: 200px;
position:relative;

}

#detail
{
background-color: green;
float : right;
width: 800px;
position:relative;
}

div.testDetail 
{
margin-top:10px;
margin-left:20px;
margin-right:20px;
margin-bottom:10px;
}

#container
{
width:1000px;
position:relative;
}
</style>

<hr>
<body>
<div id="container">
<div id="nav">
    <ul>Tests</ul>
</div>
<div id="detail">
    <div class="testDetail">
        <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/>
        <h3>Title</h3>
        <p>Testing</p>
    </div>
    <hr>
</div>
</div>
<body>

ここで何か見逃しましたか？どんな助けでも感謝します！

ありがとう。

4

3 に答える 3

8 
<div id="my-div">
  ...content goes here
</div>

CSS

#my-div{
  //For center align
  margin: 0 auto;
  // For grow & shrink as per screen size change values as per your requirements
  width: 80%;
  height: 50%;
}
于 2012-12-19T19:27:43.720 に答える
3

水平方向のセンタリングを行うための Matt の CSS の簡単な方法は次のとおりです。

margin: 0 auto;

0 は上下のマージンを指定し、auto は左右のマージンを指定します。上部/下部にマージンが必要な場合は、0 を任意のものに変更できます (つまりmargin: 20px auto;.

于 2013-12-04T20:46:15.450 に答える
2

オブジェクト、特に を中央に配置する最善の方法<div>は、次の CSS を使用することです。

margin-left: auto;
margin-right: auto;

固定マージンがない場合、オブジェクトは中央に配置されます。

サイズを変更する場合は、絶対的なサイズ (例: 400px) ではなく、ページに対して相対的なサイズ (例: 40%) にします。

于 2012-12-19T19:27:09.363 に答える