• 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;在图片的下一个标签,或者图片本身。

  • 相关阅读:
    Selenium RC和WebDriver的实现区别(一)
    布线问题
    C语言播放音乐
    圈水池
    双向BFS
    Asp.net MVC3 Razor中的扩展HtmlHelper的返回类型问题
    使用Visual Studio 利用WinGDB编译和远程调试嵌入式Linux的程序
    IoTSharp部署教程Sqlite分表篇
    sql 2005性能调优
    Sql养成一个好习惯是一笔财富
  • 原文地址:https://www.cnblogs.com/qiangmin/p/4031485.html
Copyright © 2020-2023  润新知