居中嵌入塊圖像

Question

我想居中嵌入塊圖像的div。 這是相關的HTML：

<div class = "row"> 
     <div class = "icon"> <img src = "icon.PNG" alt="Some of the interesting stuff I've worked on."> </div> 
     <div class = "icon"> <img src = "icon.PNG" alt="My past experiences."> </div> 
</div> 

和CSS：

.row{ 
    display: block; 
} 
.icon{ 
    margin: 0 auto; 
} 

結果應該是圖標並排側和水平居中。現在他們被水平居中，但他們都在彼此之下。

非常感謝幫助，我是web開發新手。

感謝。

Answer 1

Thatt是因爲div是一個塊元素。你將不得不改變HTML元素的圖標是一個內聯元素，如span

<span class="icon"> <img src="icon.PNG" alt="Some of the interesting stuff I've worked on."> </span> 
<span class="icon"> <img src="icon.PNG" alt="My past experiences."> </span> 

或可選擇地覆蓋在你的圖標類的顯示屬性inline-block，如下圖所示。

.icon { 
    display: inline-block; 
} 

演示：https://jsfiddle.net/z7qfnem4/

Answer 2

試試這個：

.row { 
text-align: center; 
} 

.icon { 
display: inline-block; 
} 

這工作，因爲display: inline-block;將使text-align: center;對塊級元素的工作。