在另一个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>