在一個div

中心兩個圖像我有這樣在一個div

<div id="browsers"> 
    <h2>Title</h2> 
    <p>Text recomending the use of either Chrome or Firefox.</p> 
    <a href="http://google.com/chrome/"><img src="img/64-chrome.png" /></a> 
    <a href="http://mozilla.org/firefox/"><img src="img/64-firefox.png" /></a> 
</div>

一個div和CSS

#browsers { 
    margin:0 auto; 
    padding:22px; 
    width:500px; 
    background:white; 
}

，我想在div中部居中兩個圖像。我設法以它們爲中心

#browsers img { 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 
}

但是輸出不是我想要的，因爲一個圖像位於另一個圖像的頂部。我希望他們在同一條線上。什麼是最好的或通常的方式來做到這一點？

來源

2011-11-21 rberaldo

通常只是#browsers {text-align:center;}並刪除你有#browsers img {...}

正如你在#browsers有額外的東西。您需要將瀏覽器圖標放在單獨的div或您的額外內容#browsers之外。

例如，

<div class="browser-icons"> ... </div>

來源

2011-11-21 15:30:23

這工作得很好。我一直在閱讀，同時尋找我的問題的答案，但是，[它不是正確的方法]（http://stackoverflow.com/questions/7055393/css-center-image-using-text-align-中央）。暫時我會堅持下去，直到有人提供另一種選擇。謝謝！ – rberaldo

@rberaldo：該鏈接表示IMG元素上的「text-align：center」不是實現它的方式，我說要在IMG元素的容器上執行此操作，而不是IMG本身。 –

你有一點。我自動認爲它不應該用於將所有圖像居中放置，因爲它意味着以文本爲中心（這只是猜測，但畢竟這個屬性被稱爲'* text * -align'）。 – rberaldo

你的問題是，你告訴圖像是在display:block;塊...嘗試display:inline;而不是。

來源

2011-11-21 15:29:42 admin

我以前試過，它沒有工作。使用'display：inline;'，雖然圖標位於同一行，但出於某種原因它們會被刷新到左側。 – rberaldo

回答

相關問題