0

我试图让我的徽标居中在页面中间，但它始终位于中心线的右侧。我是 CSS 新手，已经在谷歌上搜索了一个多小时的解决方案，但没有运气，这是我的代码：

#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 */              
}

如果您需要绝对定位，这只是另一种居中方法。否则你margin:0 auto会工作。但请确保您的徽标位于 logo.jpg 的中心

于 2012-11-06T05:05:13.833 回答
0

试试这个#logo{ text-align:center;}

于 2012-11-06T05:20:09.680 回答
0

Your image is probably wider than 200px. If so, it'll overflow beyond the right side of the #logo div, and the centering will appear to be "off toward the right". You can see an example of this situation here

To constrain the image to the width of the #logo div, just add this css: 

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

Here is the example, updated to include the image constraint above.

于 2012-11-06T05:22:50.543 回答