在HTML代码中，有时需要在文本旁边添加一个图标。

默认情况下，图片在顶部对齐，文本在底部对齐，因此图片通常高，文本低，因此不能水平居中对齐。

常见的方法有三种：1。增加css的“垂直对齐align:middle”；2.如果图片是背景图片，可以在css中设置背景图片；3.把单词和图片放在不同的地方。以上三种方式都可以在同一行显示图文。下面我们用例子来应用一下。

1.添加属性“垂直对齐：middle”

我们在实际情况中以“登录”为例，把“登录”做成图片，把“检索密码”设置成文字。html代码如下：

！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

标题文档/标题

/head

身体

差异

img src=' logo . jpg ' alt=' style=' vertical-align : middle ' a href=' '取回密码/a

/div

/body

/html

2.将图片设置为背景图片

如果我们的图片本身是背景图片，可以用css中的“背景”来设置图片。html代码如下：

！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

标题文档/标题

风格。haokan{

width: 300px

height: 50px

线高： 50px；

背景色：红色；

background: url(logo.jpg)不重复左中；

}。豪坎a{

display:块；

margin-left : 116 px；

}

/style

/head

身体

div class='haokan '

A href=" "取回您的密码/a

/div

/body

/html

3.将图片和文字分别放入不同的div。html代码如下：

！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

标题文档/标题

风格。达薇思。imgs{

display:内联块；

垂直对齐：中间；

}。达薇思。infos{

display:内联块；

}

/style

/head

身体

div class='divs '

div class=' imgs ' img src=' logo . jpg ' alt=' '/div

Div class='infos'a href=' '检索密码/a/div

/div

/body

/html

-

推荐种方法。

结束