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

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

智能推荐

文献阅读课12-Fine-Grained Temporal Relation Extraction(19ACL，时间关系，时间持续时间，数据集，语义框架，常识）_事件时间关系分析指标te3_叶落叶子的博客-程序员秘密

我们提出了一种新颖的语义框架，用于建模时间关系和事件持续时间，该事件框架将事件对映射到实际值尺度。我们使用这个框架来构造迄今为止最大的时间关系数据集，涵盖了通用依赖英语Web树库的全部。我们使用该数据集来训练模型，以共同预测细粒度的时间关系和事件持续时间。我们对我们的数据报告了强有力的结果，并显示了转移学习方法预测分类关系的有效性。

React、Vue、Angular的选择_vue angular_misolamiso的博客-程序员秘密

我看了以下这篇文章后选择Angular ，原因是都是谷歌的，很亲切，社区大，完整，不用考虑以后换框架，有强大的谷歌支持。而且支持手机端的，方便我发展。Vue还在开发，怎么样还不知道。typeScripe比JavaScripe让我喜欢的多，我熟悉MVC，面向对象式编程。很多dom操作，初期配环境可能有些麻烦，但是我看这篇文章的时候已经配好了，以后用的时候，打一两行命令就可以了，完全可以接受。主要问题是代码格式，不太懂很容易写错，试一下能不能上手。over。正文：谈到框架，这些天你的选择差不多。在本文中，我

编写网络爬虫对于状态码的处理----HTTP常用状态码_一树荼蘼的博客-程序员秘密

状态代码代码描述处理方式200请求成功获得响应的内容，进行处理201请求完成，结果是创建了新资源，新创建资源的URI可在响应的实体中得到爬虫中不会遇到202请求被接受，但处理尚未完成阻塞等待204服务器端已经实现了请求，但是没有返回新的信息，如果客户是用户代理，则无需为此更新自身的文档视图丢弃300该状态码不被HTTP/1.0的应用程序直接使用，只是作为3XX类型回应的默认解释，存在多个可用的被请...

Spring相关知识_DoNotStop的博客-程序员秘密

Spring概述1.什么是Spring？Spring是一个开源的Java EE开发框架。Spring框架的核心功能可以应用在任何Java应用程序中，但对Java EE平台上的Web应用程序有更好的扩展性。Spring框架的目标是使得Java EE应用程序的开发更加简捷，通过使用POJO为基础的编程模型促进良好的编程风格。2.Spring有哪些优点？ • 轻量级：Spring在大小和透明性方面绝对

JAVA音视频解决方案----JTT1078-2016文档梳理与一些难点梳理_jt_t 1078-2016_cuiyaonan2000的博客-程序员秘密

序言这里根据JTT1078-2016的文档进行个梳理.相当于排个优先级.很人多做事情没有优先级,总想一口吃个大胖子先梳理业务分个优先级,再把问题列出来就成功一大半了是不是这么个意思.(我是这么做事情的哈,[email protected]).然后要多总结,回头看的话收获不小.从业务功能上业务是根本,很多半瓶不满,来...

Android-Binder机制及AIDL使用，终局之战_普通网友的博客-程序员秘密

没有稳定的工作，只有稳定的能力。又到了万物复苏的季节，在程序猿这个行当里，作为 Android 开发出生的，在经历了八年的脱发生涯后，有了越来越多的想法和感触趋势随着各类移动跨平台的兴起，在 ReactNative 、Flutter 、Weex 等框架的加持下，Android 开发的能力已不再局限于 Android 领域，而各大厂商近些年也针对跨平台的不足进行逐步完善：ReactNaitve 底层重构的新架构 Fabric，将管理器等往 C++ 迁移实现同步操作和性能优化；Flutter 1.