养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

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

时间:2024-11-13 16:01:30

HTML5中如何让图片和文字处在同一行中,这里教大家利用span标签小技巧即可完成设置。

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

工具/原料

html5

方法/步骤

1、打开编辑器,这里以sublimetext3作为示范。

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

2、创建一个html文件,并且设置基本框架,然后把图片放在同一目录下。

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

3、现在body里面写入<div>标签,用于分区。

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

4、然后用img这个标签就可以插入图片了,src里面写入图片的文件名字。文字自己定义。

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

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

5、这个时候我们可以定义id,这里以class="sameline"作为示范。

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

6、然后我们需要新建一个css文件,并且在html文件里面用link指向css文件。

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

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

7、这个时候需要为id设置vertical-align:middle。然后记得把文字标签改为span。

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

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

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

8、如果文字不够大的话,那么我们可以用st鲻戟缒男yle="font-size:px"来设定大小。

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

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

© 一点知识