イメージとテキストセンターを別のdiv内に整列

Question

イメージとテキストを中央に揃えたい。

.normal-div-border { 
 
    border: 1px solid #0e0d0d1a; 
 
    margin-top: 10px; 
 
    padding: 11px; 
 
} 
 

 
.j-div { 
 
    overflow: hidden; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.j-icon { 
 
    float: left; 
 
} 
 

 
.img-span { 
 
    float: left; 
 
    margin-top: 16px; 
 
}

<div class="normal-div-border"> 
 
    <div class="j-div"> 
 
    <span class="img-span"> 
 
\t \t <img src="https://cdn2.iconfinder.com/data/icons/superheroes-set/128/ironman-2-32.png" class="j-icon"> 
 
\t \t </span> 
 
    <h2 class="new-h2"> Test Heading </h2> 
 
    </div> 
 
    <p>testing...................................</p> 
 

 
</div>

は私が中心にあるテストの見出しと画像を配置する必要がある必要なものを聞く私のHTMLコードを参照してください。現在、その画像とnew-h2の間にはギャップがあります。どのようにこれを修正することができます。

は、実際にこれを固定するための私は

.j-div{ 
      overflow:hidden; 
      width:50%; 
      margin:0 auto; 
      text-align:center; 
     } 

を使用しかし、これはテキストだけではなく、画像を定着されます。

助けてください。

Answer 1

代わりのfloat:left使用display:inline-block;

.normal-div-border { 
 
    border: 1px solid #0e0d0d1a; 
 
    margin-top: 10px; 
 
    padding: 11px; 
 
} 
 

 
.j-div { 
 
    overflow: hidden; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.j-icon, .new-h2 { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 

 
.img-span { 
 
    display:inline-block; 
 
    margin-top: 16px; 
 
}

<div class="normal-div-border"> 
 
    <div class="j-div"> 
 
    <span class="img-span"> 
 
\t \t <img src="https://cdn2.iconfinder.com/data/icons/superheroes-set/128/ironman-2-32.png" class="j-icon"> 
 
\t \t </span> 
 
    <h2 class="new-h2"> Test Heading </h2> 
 
    </div> 
 
    <p>testing...................................</p> 
 

 
</div>