2

さて、divをdiv内にラップしました。なぜこれが機能しないのですか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>test.html</title>
    <style type="text/css">
        .wrapper
        {
            margin: 0px auto;
        }
        .testimonials_png
        {
            position: absolute;
            left:20px;
            top:397px;
            width:220px; 
            height:395px;
            background: url("test_files/testimonials.png") no-repeat;
        }
        .homeLink_png
        {
            position: absolute;
            left:-1px;
            top:243px;
            width:203px; 
            height:75px;
            background: url("test_files/homeLink.png") no-repeat;
        }
        .sidingLink_png
        {
            position: absolute;
            left:202px;
            top:243px;
            width:180px; 
            height:75px;
            background: url("test_files/sidingLink.png") no-repeat;
        }
        .windowsLink_png
        {
            position: absolute;
            left:382px;
            top:243px;
            width:181px; 
            height:75px;
            background: url("test_files/windowsLink.png") no-repeat;
        }
        .roofingLink_png
        {
            position: absolute;
            left:563px;
            top:243px;
            width:183px; 
            height:75px;
            background: url("test_files/roofingLink.png") no-repeat;
        }
        .aboutLink_png
        {
            position: absolute;
            left:746px;
            top:243px;
            width:205px; 
            height:75px;
            background: url("test_files/aboutLink.png") no-repeat;
        }
        .banner_png
        {
            position: absolute;
            left:0px;
            top:0px;
            width:950px; 
            height:243px;
            background: url("test_files/banner.png") no-repeat;
        }

    </style>
     </head>
  <body>
    <div class="wrapper">
    <div class="testimonials_png"> </div>
    <div class="homeLink_png"> </div>
    <div class="sidingLink_png"> </div>
    <div class="windowsLink_png"> </div>
    <div class="roofingLink_png"> </div>
    <div class="aboutLink_png"> </div>
    <div class="banner_png"> </div>
    </div>
  </body>
</html>
4

2 に答える 2

3

ブラウザが div を正しく中央に配置できるようにするには、その div に関する情報をブラウザに提供する必要があります。

    .wrapper
    {
        margin: auto;
    }

（あなたのコードからコピー）それは間違っていますが：

    .wrapper
    {
        width:900px;
        margin:0 auto;
    }

うまくいきます！ラッパーを幅 900px としてブラウザーに伝え、残りの部分はラッパーの左右で均等に分割する必要があります... したがって、margin:auto; 何も提供しません...ユニット仕様が必要です（センタリングには0を使用します）。

コードのもう1つの問題は、絶対位置のラッパーのコンテンツがあり、それがブラウザーによってラッパーの外側の要素としてレンダリングされるという事実です。つまり、ラッパーがそこにない場合と同じです。

    .wrapper
    {
        postion:absolute;
        top:0;
        left:50%;
        width:900px;
        margin-left:-450px;
    }

これは、ラッパーが絶対位置で使用するブラウザーになります。つまり、上から 0 単位、左からブラウザーのウィンドウの 50% です。中央に配置するには、指定された幅の半分だけ引き戻します。 、したがって -450px の左マージン。

ここで、コンテンツを position:relative; に設定する必要があります。ラッパーの位置に関して相対的に配置する...

OK、これがあなたのコードです（テスト済み）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>test.html</title>
    <style type="text/css">
        .wrapper
        {
            position:absolute;
            left:50%;
            width:950px;
            margin-left:-475px;
        }
        .testimonials_png
        {
            position: absolute;
            left:20px;
            top:397px;
            width:220px;
            height:395px;
            background:green url("test_files/testimonials.png") no-repeat;
        }
        .homeLink_png
        {
            position: absolute;
            left:-1px;
            top:243px;
            width:203px;
            height:75px;
            background:purple url("test_files/homeLink.png") no-repeat;
        }
        .sidingLink_png
        {
            position: absolute;
            left:202px;
            top:243px;
            width:180px;
            height:75px;
            background:orange url("test_files/sidingLink.png") no-repeat;
        }
        .windowsLink_png
        {
            position: absolute;
            left:382px;
            top:243px;
            width:181px;
            height:75px;
            background:yellow url("test_files/windowsLink.png") no-repeat;
        }
        .roofingLink_png
        {
            position: absolute;
            left:563px;
            top:243px;
            width:183px;
            height:75px;
            background:blue url("test_files/roofingLink.png") no-repeat;
        }
        .aboutLink_png
        {
            position: absolute;
            left:746px;
            top:243px;
            width:205px;
            height:75px;
            background:red url("test_files/aboutLink.png") no-repeat;
        }
        .banner_png
        {
            position: absolute;
            left:0px;
            top:0px;
            width:950px;
            height:243px;
            background:pink url("test_files/banner.png") no-repeat;
        }

    </style>
     </head>
  <body>
    <div class="wrapper">
        <div class="testimonials_png"> </div>
        <div class="homeLink_png"> </div>
        <div class="sidingLink_png"> </div>
        <div class="windowsLink_png"> </div>
        <div class="roofingLink_png"> </div>
        <div class="aboutLink_png"> </div>
        <div class="banner_png"> </div>
    </div>
  </body>
</html>
于 2010-05-30T04:10:14.580 に答える
1

div IMOを中央に配置する最良の方法は、ラッパーという名前のメインdivを作成し、cssでマージンを割り当てることです。0auto; その要素に。

したがって、すべてのコンテンツは上、左、右、下などから均等に中央に配置されます

于 2010-05-30T03:54:03.580 に答える