首页 > 软件开发 > HTML >

HTML5中如何让图片和文字处在同一行中

来源:互联网 2023-03-16 19:13:34 412

HTML5中如何让图片和文字处在同一行中,这里教大家利用span标签小技巧即可完成设置。kzR办公区 - 实用经验教程分享!

HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

工具/原料

  • html5

方法/步骤

  • 1

    打开编辑器,这里以sublime text3作为示范。kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

  • 2

    创建一个html文件,并且设置基本框架,然后把图片放在同一目录下。kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

  • 3

    现在body里面写入div>标签,用于分区。kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

  • 4

    然后用img这个标签就可以插入图片了,src里面写入图片的文件名字。文字自己定义。kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

  • 5

    这个时候我们可以定义id,这里以class="sameline"作为示范。kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

  • 6

    然后我们需要新建一个css文件,并且在html文件里面用link指向css文件。kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

  • 6本页面未经许可获取自百度经验
  • 7

    这个时候需要为id设置vertical-align: middle。然后记得把文字标签改为span。kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

  • 8

    如果文字不够大的话,那么我们可以用style="font-size: px"来设定大小。kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

    HTML5中如何让图片和文字处在同一行中kzR办公区 - 实用经验教程分享!

  • 注意事项

    • 注意这个方法如果文字用p标签的话是显示不了在同一行的

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!kzR办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码