居中嵌入块图像

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;对块级元素的工作。