CSS - 在css中並排放置兩個圖像

我想將兩個圖像並排居中，但由於某種原因，它總是在相互之間顯示圖像。有誰知道我怎麼能讓他們居中並且彼此相鄰？CSS - 在css中並排放置兩個圖像

謝謝！

HTML代碼

<a href="mailto:[email protected]"> 
<img id="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/></a> 
<a href="https://www.facebook.com/OlympiaHaacht" target="_blank"> 
<img id="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>`

CSS代碼

#fblogo { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    height: 30px; 
}

來源

2012-08-05 CustomX

ID必須是唯一的。 – j08691 2012-08-05 19:31:29

嘗試改變

#fblogo { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    height: 30px; 
}

到

.fblogo { 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    height: 30px; 
} 

#images{ 
    text-align:center; 
}

HTML

<div id="images"> 
    <a href="mailto:[email protected]"> 
    <img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/></a> 
    <a href="https://www.facebook.com/OlympiaHaacht" target="_blank"> 
    <img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a> 
</div>

DEMO。

來源

2012-08-05 19:33:32

這使它們彼此相鄰，但不居中。 – CustomX 2012-08-05 19:37:25

也檢查更新的演示。 – 2012-08-05 19:38:52

看來附加到電子郵件地址的圖像不再有效。在這裏你會找到這個答案的小提琴的固定版本（以及一些改進以提高代碼的可讀性）：http://jsfiddle.net/hBCzA/1/（我剛剛在img http：/ /a.fsdn.com/sd/topics/programming_64.png） – pablofiumara 2013-09-16 23:22:23

你不能有相同的ID兩個元素。除此之外，你將它們定義爲塊元素，意味着（以外行的話來說）它們被迫出現在他們自己的路線上。

相反，嘗試這樣的事：

<div class="link"><a href="..."><img src="..."... /></a></div> 
<div class="link"><a href="..."><img src="..."... /></a></div>

CSS：

.link { 
    width: 50%; 
    float: left; 
    text-align: center; 
}

來源

2012-08-05 19:33:06

這不起作用，它出於某種原因搞砸了：s – CustomX 2012-08-05 19:47:01

我剛剛做了這一個項目，並通過使用我沒有使用其他的事了H6標籤來實現它：

在HTML代碼

：

<h6><img alt="small drawing" src="../Images/image1.jpg" width="50%"/> <img alt="small drawing" src="../Images/image2.jpg" width="50%"/><br/>Optional caption text</h6>

之間的空間圖像標籤在圖像之間放置垂直間隙。每個img標籤中的width參數都是可選的，但它會整齊排列圖像的大小以填充頁面的寬度。請注意，每張圖片必須設置爲只佔50％的寬度。（如果使用3張圖像，則爲33％）。width參數必須位於alt和src參數之後，否則將不起作用。

在CSS代碼：

/* h6: set presentation of images */ 
h6 
    { 
    font-family: "Franklin Gothic Demi", serif; 
    font-size: 1.0em; 
    font-weight: normal; 
    line-height: 1.25em; 
    text-align: center; 
    }

的文本項設置標題文本的外觀，和text-align屬性中心兩個圖像和字幕文本。

來源

2014-09-05 08:42:39

不要僅僅因爲您沒有在任何地方使用標籤而使用標籤 - 這是類的用途（使用div或跨度）。標籤意味着語義，大多數瀏覽器都有需要重置的默認樣式。 – Marshall 2015-06-26 15:58:08

Flexbox可以在周圍的div上只用兩個css規則來做到這一點。

.social-media{ 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div class="social-media"> 
 
<a href="mailto:[email protected]"> 
 
<img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a> 
 
<a href="https://www.facebook.com/OlympiaHaacht" target="_blank"> 
 
<img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a> 
 
</div>

來源

2017-03-30 20:06:49 Julix

CSS - 在css中並排放置兩個圖像

回答

相關問題