sublime text3怎么实现图片和文字在同一行显示?

番茄系统家园 · 2022-05-08 08:29:01

HTML5中想要让图片和文字处在同一行中,我们可以利用span标签小技巧即可完成设置,今天我们就来看看sublime text3实现图片和文字同行显示的教程。

软件名称:
Sublime Text 4(代码编辑器) v4.0.0.4092 破解汉化特别版
软件大小:
17.70MB
更新时间:
2020-11-17

sublime text3怎么实现图片和文字在同一行显示?

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

sublime text3怎么实现图片和文字在同一行显示?

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

sublime text3怎么实现图片和文字在同一行显示?

3、现在body里面写入

标签,用于分区。

sublime text3怎么实现图片和文字在同一行显示?

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

sublime text3怎么实现图片和文字在同一行显示?

sublime text3怎么实现图片和文字在同一行显示?

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

sublime text3怎么实现图片和文字在同一行显示?

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

sublime text3怎么实现图片和文字在同一行显示?

sublime text3怎么实现图片和文字在同一行显示?

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

sublime text3怎么实现图片和文字在同一行显示?

sublime text3怎么实现图片和文字在同一行显示?

sublime text3怎么实现图片和文字在同一行显示?

8、如果文字不够大的话,那么我们可以用来设定大小。

sublime text3怎么实现图片和文字在同一行显示?

sublime text3怎么实现图片和文字在同一行显示?

以上就是sublime text3实现图片和文字在同一行显示的教程,希望大家喜欢,请继续关注。

免责声明: 凡标注转载/编译字样内容并非本站原创,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如果你觉得本文好,欢迎推荐给朋友阅读;本文链接: https://m.nndssk.com/rjwt/147161eQgEx1.html
猜你喜欢
最新应用
热门应用