0

ロゴをページの中央に配置しようとしていますが、常に中央線の右側にあります。私はCSSを初めて使用し、解決策を1時間以上グーグルで調べてきましたが、運が悪く、ここに私のコードがあります:

#Container{
    width: 100%;
}

#logo{
    display: block;
    position: relative;
    width: 200px;
    margin: 0 auto;
}

#col{
    width: 170px;
    float: left;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>tesing/title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <LINK href="CLL1.css" rel="stylesheet" type="text/css">
    </head>
    <body>  
        <div id="logo"><img src="images/Logo.jpg"/></div>
        <div id="Container">


        <div id="col">              
            <select name="thing">
                <option value=0>Category
             </select>

             <select name="model">
                 <option>Sub Category</option>
              </select>

             <select name="color">
                 <option>Sub Sub Category</option>
               </select>            
        </div>
        </div>
    </body>
</html>
4

3 に答える 3

1

CSS は#logodiv を問題なく中央に配置します。それでもずれて見える場合は、ロゴが実際の 200 ピクセル幅の画像の中央に配置されていることを確認してください。

中心への代替アプローチ (絶対配置を使用):

#logo {
    width:200px;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-100px; /* negative half of total width */              
}

これは、絶対配置が必要な場合に中央に配置するもう 1 つの方法です。それ以外の場合margin:0 autoは機能します。ただし、ロゴが logo.jpg の中央にあることも確認してください。

于 2012-11-06T05:05:13.833 に答える
0

あなたの画像はおそらくより広いです200px。その場合、divの右側を超えてオーバーフロー#logoし、センタリングが「右側に向かってオフ」になっているように見えます。この状況の例をここで見ることができます

画像をdivの幅に制限するには、次の#logocssを追加するだけです。

#logo img { max-width: 100%; }

上記の画像制約を含めるように更新された例を次に示します。

于 2012-11-06T05:22:50.543 に答える
0

これを試して#logo{ text-align:center;}

于 2012-11-06T05:20:09.680 に答える