html 圖片文字並排顯示

標籤：style   blog   http   color   io   os   ar   sp   div   

情況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;在圖片的下一個標籤，或者圖片本身。

html 圖片文字並排顯示