css怎么将字和图对齐

藏色散人
Freigeben: 2023-01-04 09:38:47
Original
22802 Leute haben es durchsucht

css将字和图对齐的方法:1、通过添加css的“vertical-align:middle;”实现将字和图对齐;2、通过在css中设置背景图片实现将字和图对齐;3、把文字和图片分别放入不同的div中来实现将字和图对齐即可。

css怎么将字和图对齐

本教程操作环境:Windows7系统、HTML5&&CSS3版本、Dell G3电脑。

推荐:《css视频教程

在 HTML 代码中,有时会需要在文字旁边加上一个图标。

默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐。

常见方法有3种:1、通过添加css的“vertical-align:middle;”;2、如果图片是背景图片,可以在css中设置背景图片;3、把文字和图片分别放入不同的div中。上面三种方法都可以让图片和文字在同一行显示,下面我们用实例来应用一下。

1、添加上“vertical-align:middle”属性

我们用“登陆”这个在实际情况做实例,把“登陆”做成图片,“找回密码”设置成文字其html代码如下:

    Document 
Nach dem Login kopieren

效果图:

09bd8416839894c512aef7d6e251c7b.png

2、把图片设置为背景图片

如果我们的图片本身是一个背景图片的话,可以在css中使用“background”来设置该图片,html代码如下:

    Document  
Nach dem Login kopieren

效果图:

a2e8cc03343f22ee4ba900bf4cb9cf6.png

3、分别把图片和文字放入不同的div中,html代码如下:

    Document  
Nach dem Login kopieren

效果图:

240a6c21f779c063c7bc1021aafde66.png

更多编程相关知识,请访问:编程教学!!

Das obige ist der detaillierte Inhalt voncss怎么将字和图对齐. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!