インラインブロックイメージのセンタリング

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

divはブロック要素であるためです。アイコンは、このような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に表示プロパティをオーバーライドするためには、HTML要素を変更する必要があります。

.icon { 
    display: inline-block; 
} 

デモ：display: inline-block;はtext-align: center;は、ブロックレベル要素に動作するようになりますので、これは動作します

.row { 
text-align: center; 
} 

.icon { 
display: inline-block; 
} 

：https://jsfiddle.net/z7qfnem4/

Answer 2

はこれを試してみてください。