divの下にdivをそれぞれ中央に配置するにはどうすればいいですか？

Question

どのように私はそれの下のテキストにそれぞれの中心にimgを並べることができますか？ラッパーdivは左に揃えられます。

<div class="wrapper"> 
<div class="com-icon"> 
    <img src="images/IT.png" alt="laptop logo"> 
</div> 
<div class="com-text"> 
    <p>IT Solutions</p> 
</div> 
</div> 

Answer 1

COM-アイコンおよびCOM-テキストの周囲に別のラッパーを追加します。そして、あなたがそれを望んでいたことを整理してください。以下の例：

<div class="wrapper"> 
    <div class="wrapper-inner"> 
     <div class="com-icon"> 
      <img src="images/IT.png" alt="laptop logo"> 
     </div> 
     <div class="com-text"> 
      <p>IT Solutions</p> 
     </div> 
    </div> 
</div> 

Answer 2

CSSファイルに以下を追加：あなたはあなたが悪名高いインラインスタイルを追加することができます働いているかどうかを確認したい場合は

.wrapper{ 
    text-align: center; 
} 

か。 この方法はお勧めではありません。

<div class="wrapper" style="text-align:center;"> 
<div class="com-icon"> 
    <img src="images/IT.png" alt="laptop logo"> 
</div> 
<div class="com-text"> 
    <p>IT Solutions</p> 
</div> 
</div> 

Answer 3

テーブル

table.center { 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.com-text, 
 
.com-icon { 
 
    margin: auto; 
 
}

<div class="wrraper"> 
 
    <table class="center"> 
 
    <tr> 
 
     <td> 
 
     <div class="com-icon"> 
 
      <img src="image.jpg" alt="laptop logo"> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class="com-text"> 
 
      <p>IT Solutions</p> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>