将图像和文本中心对齐另一个Div

Question

我想在中心对齐图像和文本。请参阅我的HTML代码

.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">
		 <img src="https://cdn2.iconfinder.com/data/icons/superheroes-set/128/ironman-2-32.png" class="j-icon">
		 </span>
    <h2 class="new-h2"> Test Heading </h2>
  </div>
  <p>testing...................................</p>
</div>

听我需要的是，我需要在中心安排测试标题和图像。目前，该图像和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">
		 <img src="https://cdn2.iconfinder.com/data/icons/superheroes-set/128/ironman-2-32.png" class="j-icon">
		 </span>
    <h2 class="new-h2"> Test Heading </h2>
  </div>
  <p>testing...................................</p>
</div>