html 圖片文字並排顯示

最新解決方法

 經常使用狀況：

 

<div>
    <img src="images/demand.png">
    <span>設置成功，請牢記新的登錄密碼</span>
</div>

 

　　顯示圖片：

 

 

 

解決方法：

 

1 <div>
2     <img src="images/demand.png" style="vertical-align:middle;">
3     <span>設置成功，請牢記新的登錄密碼</span>
4 </div>

 

 顯示圖片：

 

 

解決思路：

　　1.利用inline的vertical-align:middle屬性（注意：這個屬性只對inline和inline-block有效，對block無效）

　　2.後面的文字用inline元素包裝起來，不然仍是會錯位

 

 

狀況1：

1  <!--狀況1-->
2     <div style="line-height: 60px; height: 60px;">
3         <img src="../修改密碼/求教/images/yes_big.png">
4        設置成功，請牢記新的登錄密碼
5     </div>

顯示圖片：

 

解決方法：

<!--狀況1-->
    <div style="line-height: 60px; height: 60px;">
        <p style="display:inline-block;background:url(images/yes_big.png) no-repeat left center;padding-left:40px">
            設置成功，請牢記新的登錄密碼
        </p>
    </div>

改變後圖片：

解決思路：1.設置外面容器的height和line-height。

              2.把顯示圖片的容易變爲inline-block。

              3.將圖片設置爲背景，注意left center，padding-left:（圖片的寬度）；在顯示文字。

狀況2：

 

代碼

 1   <!--狀況2-->
 2     <div>
 3         <div style="padding-top: 5px;height: 50px;line-height: 26px">
 4             <span style="float: left">驗證碼：</span>
 5             <div style="float: left">
 6                 <input type="text" class="text" value="59秒後可從新發送" disabled>
 7                 <label><img  style="height: 26px;" src="../修改密碼/求教/images/yes.png"></label>
 8                 <label >驗證碼已發送!</label>
 9             </div>
10         </div>
11     </div>

當前效果爲：

修改後的代碼：

 1  <div>
 2         <div style="padding-top: 5px;height: 50px;line-height: 26px">
 3             <span style="float: left">驗證碼：</span>
 4             <div style="float: left;position: relative" >
 5                 <input type="text" class="text" value="59秒後可從新發送" disabled>
 6                 <label style="position: absolute;top:0px;"><img  style="height: 26px;" src="images/yes.png"></label>
 7                 <label style="margin-left: 30px" >驗證碼已發送!</label>
 8             </div>
 9         </div>
10     </div>

修改後的效果：

解決思路：1.設置外面容器的position:relative;

               2.設置圖片容器的position:absolute;並指明top：0px；

               3.必定要記得margin-left;在圖片的下一個標籤，或者圖片自己。