Question

我试图让我的徽标位于页面中间，但它始终位于中心线的右侧。我是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>

Answer 1

你的CSS会将#logo div放在中心位置。如果它静止不动，请确保徽标位于您的实际200px宽图像的中心。

中心的替代方法（使用绝对定位）：

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

如果您需要绝对定位，这只是另一种中心方法。否则，margin:0 auto将有效。但请确保您的徽标在logo.jpg

中居中

Answer 2

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

Answer 3

您的图片可能比200px宽。如果是这样，它将溢出#logo div的右侧，并且中心将显示为“向右”。您可以看到此情况的示例here

要将图像限制为#logo div的宽度，只需添加此css：

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

Here是示例，已更新为包含上面的图像约束。

图像没有居中

3 个答案: