圖像不集中

我試圖讓我的標誌居中在頁面中間，但它總是在中心線的右側。我是新來的CSS和已經沒有運氣這裏現在google搜索解決了一個多小時是我的代碼：圖像不集中

#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>

來源

2012-11-06 Yamaha32088

在這裏看起來很好http://jsfiddle.net/j08691/YTXwQ/ – j08691

@ j08691 ...你剛剛教我關於placekitten.com的奇蹟。謝謝你，先生。 – Eric

另外，請嘗試將您的徽標放在容器中，看看會發生什麼。 –

你的形象很可能比200px寬。如果是這樣，它會溢出#logo div的右側，並且居中將顯得「向右偏離」。你可以看到一個例子這種情況here

要將圖像約束到#logo div的寬度，只需添加這個CSS：

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

Here是例子，更新，包括上面的圖片約束。

來源

2012-11-06 05:22:50 Lee

你的CSS將居中#logo格就好了。如果它仍然關閉，請確保徽標居中在您的實際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-06 05:05:13 Andy

試試這個#logo{ text-align:center;}

來源

2012-11-06 05:20:09

答案應該更具描述性 –

回答

相關問題