马海祥博客 > 网站制作 > css教程 > 如何利用CSS代码使图片和文字在同一行显示且对齐

如何利用CSS代码使图片和文字在同一行显示且对齐

时间：2015-05-05 文章来源：马海祥博客访问次数：

对于初学css的新手朋友来说，经常会遇到这样一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么，我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢？

如何利用CSS代码使图片和文字在同一行显示且对齐-马海祥博客

对于这种现象，方法有3种：

1、通过添加css的“vertical-align:middle;”；

2、如果图片是背景图片，可以在css中设置背景图片，然后设置文字的padding属性；

3、把文字和图片分别放入不同的div中。

经过多次的测试，上面三种方法都可以让图片和文字在同一行显示，下面马海祥就用实例来为大家操作一下：

1、在css中给div添加上“vertical-align:middle”属性

有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片和文字所在的行中添加CSS属性：vertical-align:middle；这样，它们在同一行就会垂直居中对齐了。

在此，马海祥就用“注册、登陆、找回密码”这个在实际运用中经常遇到的情况还做实例，把“注册”和“登陆”做成图片，“找回密码”设置成文字。

html代码如下：

<div id="denglu">
　　<img src="reg.gif">
　　<img src="login.gif">
　　<a href="#">找回密码</a>
　　</div>

css代码如下:

#denglu *{
　　vertical-align:middle; /* 居中对齐， */
　　font-size:14px;
　　}

在浏览器中运行后的效果图如下：

如何利用CSS代码使图片和文字在同一行显示且对齐-马海祥博客

使用css的“vertical-align:middle”属性让图片和文字在同一行对齐是一种非常常用的方法，也是比较利于代码优化和精简的一种方法（具体可查看马海祥博客《网站CSS代码优化的7个原则》的相关介绍），希望大家可以掌握。

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

如果我们的图片本身是一个背景图片的话，可以在css中使用“background”来设置该图片，然后设置文字的padding属性就可以使他们在同一行显示了。

html代码如下：

<div id="denglu">
　　<div id="zhaohuimima"><a href="#">找回密码</a></div>
　　</div>

css代码如下：

#denglu {
　　background:url(login.gif) no-repeat left center;
　　}
　　#zhaohuimima{
　　font-size:14px;
　　padding-left:50px;
　　}

我们在css中设置了背景图片，然后又设置了文字的padding-left属性，这样，图片和文字就在同一行显示了，运行结果就不切图了，你可以自己试一下。

3、把文字和图片分别放入不同的div中

下面说下最后一种方法，分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行了。

html代码如下：

<div id="denglu">
　　<div id="zhuce"> <img src="reg.gif"/>
　　<div id="zhaohuimima"><a href="#">找回密码</a></div>
　　</div>

css代码如下：

#zhaohuimima{
　　font-size:14px;
　　margin-top:-16px;
　　padding-left:50px;
　　}

在浏览器中运行以后，你会发现，这个方法也可以让图片和文字在同一行显示，但是看起来好像麻烦了一点，所以个人还是比较推荐第一种方法的。

马海祥博客点评：

随着浏览器种类的不断增加，你会发现我们的网站时常会出现这样或那样的兼容问题，这就需要我们在网站制作的初期就严格的规范好网站的代码，以免在以后的运营过程中再次修改网站的代码。

本文发布于马海祥博客文章，如想转载，请注明原文网址摘自于http://www.mahaixiang.cn/css/1149.html，注明出处；否则，禁止转载；谢谢配合！

相关标签搜索： css 图片 CSS代码

上一篇：如何命名CSS文件及样式规范更利于SEO优化
下一篇：利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

您可能还会对以下这些文章感兴趣！

CSS常用代码使用技巧大全

这几天，一直忙于帮公司做新的网站，在设计和修改新模板页面的过程中，需要不停的调试CSS样式，有的部分还需要重新来写。为了便于以后再次使用，我特意将在网页制作过程中常使用的CSS代码的使用技巧整理成文章的形式，在马海祥博客上跟大家分享一下，一是便于以后自己在……【查看全文】

阅读：1784关键词： CSS常用代码 CSS代码 CSS代码大全 CSS使用技巧 日期：2013-10-19
利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

CSS主要用于对HTML文件功能的补充及扩展，其作用就是对HTML文件中各种排版进行设置，达到对网页中字体、颜色、背景、图片等的控制，使网页能够完全依照设计者的想法来显示。CSS可以控制网页的显示，HTML标签中的属性也可以控制其显示，为什么还要有CSS呢？其中一个原因就是：……【查看全文】

阅读：2360关键词：制作网页网页制作 css 日期：2015-05-13
如何利用CSS代码使图片和文字在同一行显示且对齐

对于初学css的新手朋友来说，经常会遇到这样一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢？有些朋友会发现，如果一行内容中有图片有文字……【查看全文】

阅读：29791关键词： css代码图片 css 日期：2015-05-05
CSS样式表文件的优化方法及技巧

今天，整理了一些CSS简写技巧，它们其实是CSS最常用的写法，但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS，使得代码过于臃肿。CSS代码优化的最大好处就是能够显着减少CSS文件的大小，其实还有很多其他益处，臃肿而杂乱的CSS样式表会使你遇到问题是难以调试……【查看全文】

阅读：405关键词： css css优化 日期：2016-10-27
background-position的使用方法及详细介绍

background属性是CSS中最常见的属性之一，它是一个简写属性，其包含background-color、background-image、background-repeat、background-position、background-size……【查看全文】

阅读：162关键词： css 使用方法 日期：2017-03-26
网站CSS代码优化的7个原则

整理和优化代码不仅是为了你的CSS文件大小，还包括了维护性和可读性，以上的原理并不只是针对CSS，它们还能应用到HTML，Javascript以及其他编程语言，CSS文件不只是为了呈现给你网站的最终用户，上面的原理可以帮助用户体验以及开发者经验，运用这些原则到你未来的项目……【查看全文】

阅读：2598关键词：网站代码 css代码 css优化 日期：2014-10-10
CSS无图片技术的实现方法有哪些？

什么是CSS无图片技术？CSS无图片技术就是在不使用CSS Image（通过CSS的引入的背景图片,不包括img标签内的图片）情况下生成类似图片效果的技术；换句话的意思就是在使用纯CSS生成类似图片效果的技术。如果我们尽可能的使用无图片技术来实现，明显可以提高页面的加载速度……【查看全文】

阅读：1441关键词： CSS技术无图片技术 CSS方法 日期：2014-02-14
清除CSS浮动的方法原理及优缺点评定

今天看到有个博友问如何清除网站页面的CSS浮动？因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及width height属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。其实解决浮动引起的问题有多种方法，……【查看全文】

阅读：5766关键词：清除CSS浮动 CSS浮动方法 CSS浮动原理 CSS优缺点 日期：2014-03-16
常见的一些CSS基础知识题

CSS指层叠样式表(Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件……【查看全文】

阅读：241关键词： css知识 css 日期：2018-12-27
如何命名CSS文件及样式规范更利于SEO优化

一名专业的SEO（搜索引擎优化）有很多工作要做，其中对代码的优化是一个很关键的步骤，为了更加符合SEO优化的规范，我们就需要按照CSS+DIV的命名规则来建设我们的网站，当然这些CSS文件不用一次性全部新建出来，只需要制作到那个页面的时候再建立即可，但是在初步规划的……【查看全文】

阅读：3655关键词： css文件 css样式 seo优化 css 日期：2014-11-10

↓ 点击查看更多 ↓

分类目录

SEO新闻
SEO思维
移动端SEO
SEO问答
医疗SEO
淘宝SEO
企业SEO
站外SEO
网站设计
交互设计
网站策划
网页制作
营销策划
营销案例
竞价技巧
数据分析
写作技巧
微信微博
自媒体
新媒体
内容营销
网站运营
O2O模式
App运营
产品运营
网赚教程
创新思维
电子商务
名人访谈
创业故事

热点推荐

资深Web前端开发工程师教你如何优化CSS框架
如何通过修改CSS样式来增强平板电脑的用户体验
如何利用CSS代码使图片和文字在同一行显示且对齐
CSS样式表中px、em和rem单位的区别与使用特点

运营思维更多>>

数据分析的流程及分析方法: 立即访问

如何利用O2O模式经营一家理发连锁店: 立即访问

产品经理怎样用数据指标分析的思路优化产品？: 立即访问

依靠电子商务改变茶叶营销模式会遇到什么难题？: 立即访问

今日头条能否成为自媒体赚钱的新平台: 立即访问

新接手一款App该怎么做App优化推广？: 立即访问

免费模式赚钱的核心竞争是什么: 立即访问

网赚新手快速寻找暴利项目产品的4大途径: 立即访问

竞品分析报告的3大步骤: 立即访问

视频网站为什么很难赚钱？: 立即访问

互联网更多>>

基于高斯模糊原理的模糊图片的研究高斯模糊（Gaussian Blur）的原理中，它是根据高斯曲线调节象素色值，它是有选择地模糊图像。说得直白一点，就是高……
互联网思维的一些特征如今，互联网迅猛发展已经渗透人们生活各个方面，尤其是互联网正加快向传统行业渗透和融合，对传统行业提出严……
盘点2010年代这10年的重大网络安全事件二十一世纪的第2个十年即将过去，在过去十年里有很多的重大网络安全事件发生，我们见证了过去十年，大量的数据……

网络营销更多>>

浅谈社交网络营销的七大营销策略	2017年数字营销的十大发展趋势及发展状态
新浪微博已正式发布公告全面封杀微信	从免费到付费的社交媒体形态发展分析