html5怎么让字跟图片对齐,css怎么将字和图对齐_RandomGuy的博客-程序员秘密

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

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

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

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

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

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

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

Document

找回密码

效果图：

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

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

Document

.haokan{

width: 300px;

height: 50px;

line-height: 50px;

background-color: red;

background: url(logo.jpg) no-repeat left center;

}

.haokan a{

display: block;

margin-left: 116px;

}

找回密码

效果图：

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

Document

.divs .imgs{

display: inline-block;

vertical-align: middle;

}

.divs .infos{

display: inline-block;

}

找回密码

效果图：

更多编程相关知识，请访问：编程教学！！

本文链接：https://blog.csdn.net/weixin_42532067/article/details/117831290

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Ubuntu 16.04全新特性和改进大盘点：软件中心没了_ubuntu桌面没有软件中心_NCTU_to_prove_safety的博客-程序员秘密

Ubuntu 16.04全新特性和改进大盘点：软件中心没了2016-4-14 23:31:07来源：系统极客作者：-责编：凌空评论：186Ubuntu 16.04 （代号Xenial Xerus，意为好客的非洲地松鼠）不久就将发布，作为一个狂热的Ubuntu粉丝，小编帮大家盘点了值得关注的几点Ubuntu 16.04 LTS新特性和功能改进。自官方放出消息以来，我们就一直在关

Autoware报错：Can‘t Generate Global Path for Start解决方法_can't generate normals for blendshape_wweweiweiweiwei的博客-程序员秘密

Autoware报错：Can't Generate Global Path for Start解决方法用过Autoware规划模块的小伙伴可能都遇到过这个报错：Can’t Generate Global Path for Start，那么这篇文章讲讲怎么解决这个报错问题。最近通过我研读Autoware中规划模块的代码我发现其中有一段代码的意思是，如果waypoint<2（是2还是3来着记不清了，反正就这个意思），则输出Can’t Generate Global Path for Start，那么问

PCI Geomatica 操作视频专辑及软件分享_牛肉面加肉的博客-程序员秘密

最近下载了catalyst.earth发布在youtube上的一些关于Geomatica的操作视频，并包含英文字幕和中文字幕，英文字幕为视频页自动生成，准确率高，中文字幕是通过英文直接用google翻译过来的，翻译出错时以英文字幕为准。现在已经上传至B站，感兴趣的朋友可以通过下面的链接直达观看，后续新内容也会更新在这里。注：Geomatica软件现在叫catalyst-professional，但界面和操作与原Geomatica并无明显差异。视频中操作也较多为老版本，也并不影响在新版本上的操作。CAT

winIO模拟键盘鼠标_winio鼠标点击_li_lingfeng的博客-程序员秘密

winIO模拟键盘鼠标欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计...

greenplum seq acan 和 index scan_acan和scan_qq_36748772的博客-程序员秘密

set session enableseqscan=false; # 默认是true，查询非常少量的数据是有效下面sql设置为false是true效率6倍、select dtype,name from ambmaccnt where statdate =20170701 group by dtype,name limit 100...

Windows服务器远程桌面连接RDP_windows远程桌面rdp_雁無痕的博客-程序员秘密

协议RDP （Remote Desktop Protocol)端口：默认3389服务器端设置控制面板 -> 系统与安全 -> 允许远程访问选择允许远程桌面连接，并点击“选择用户”，赋予用户通过远程桌面连接的权限。在启用远程桌面访问后，会在防火墙中自动开放了RDP协议，如下：同时，赋予的用户自动会被加入到Remote Desktop Users组。这里需要注意的是，尽管RDP启用了，防火墙也开了，用户也赋予权限了，有时可能还是连接不上，这是就需要检查一下本地安全策略，是否