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