在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三:

1.添加CSS属性:vertical-align:middle;

代码: <style> a img{border:none} .testdiv *{ vertical-align:middle; } </style>

<div class="testdiv">  <a href="http://www.zc144.com/"><img src="http://www.zc144.com/download/Template.jpg" alt="这里是图片" /></a>  <span>这里是文字,看看文字对齐了没</span> </div>

2.div嵌套:将图片和文字分别套上一个div,就可以利用 margin 熟悉任意定位了

代码: <style> a img{border:none} .testIMG{ float:left; display:inline; margin-top:0; margin-left:5px; } .testTXT{ float:left; display:inline; margin-top:20; margin-left:5px; } </style>

<div class="testdiv">  <div class="testIMG"><a href="http://www.zc144.com/"><img src="http://www.zc144.com/download/Template.jpg" alt="这里是图片" /></a></div>  <div class="testTXT"><span>这里是文字,看看文字对齐了没</span></div> </div>

3.把图片作为背景:如果你的图片只是用来作为小图标放在文字的左侧,那就推荐用这个方法,图片设置成文字的背景,不循环,定位在左侧上下居中,文字向左padding图片的宽度加几个像素。

代码: <style> a img{border:none} .testTXT{ height:60px; line-height:60px; padding-left:65px; background:url(http://www.zc144.com/download/Template.jpg) no-repeat left center } </style>

<div class="testdiv">  <div class="testTXT"><span>这里是文字,看看文字对齐了没</span></div> </div>

DIV+CSS 让同一行的图片和文字对齐的更多相关文章

  1. DIV+CSS 让同一行的图片和文字对齐【转藏】

    DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...

  2. CSS ul li a 背景图片与文字对齐

    <div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif&quo ...

  3. div css 伪类 不固定图片大小 居中, css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

  4. CSS 之 控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

  5. css控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将 ...

  6. 用DIV+CSS切割多背景合并图片 CSS Sprites 技术

    很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...

  7. [CSS]图片与文字对齐问题

    摘自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 图片与文字默认是居底对齐了.所以当图片与文字在一起的时候往往都是不对齐的.尤其图片较小时就更加明显了,我看到很多人使 ...

  8. [CSS]复选框单选框与文字对齐问题的研究与解决.

    前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...

  9. DIV+CSS 图文混排的图片居中办法

    不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. <div>图文混排 <br> ...

随机推荐

  1. java基础知识拾遗(三)

    1.类加载 bootstrap classloader -引导(也称为原始)类加载器,它负责加载Java的核心类. extension classloader -扩展类加载器,它负责加载JRE的扩展目 ...

  2. 深入理解Java Proxy机制(转)

    动态代理其实就是java.lang.reflect.Proxy类动态的根据您指定的所有接口生成一个class byte,该class会继承Proxy类,并实现所有你指定的接口(您在参数中传入的接口数组 ...

  3. ASP.NET 程序发布详细过程

    前言 ASP.NET网站的发布,无论是初学者还是高手,在程序的发布过程中或多或少会存在一些问题,譬如VS发布ASP.NET程序失败.IIS安装失败.IIS发布失败.局域网内不能访问 配置文件错误.权限 ...

  4. [ios2]Emoji表情符号兼容方案 【转】

    Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji ...

  5. Python json解析

    #encoding: utf-8 ''' Author:Siukwan ''' import sys reload(sys) sys.setdefaultencoding('utf8') import ...

  6. Factory Pattern(工厂模式)

    1.工厂模式简介 工厂模式,专门负责将大量有共同接口的类实例化(用来生产对象).其定义为定义一个用于创建对象的接口,让子类决定实例化那一个类.工厂方法使一个类的实例化延迟到其子类. 工厂模式拥有以下几 ...

  7. C基于客户端的通信实例

    运行环境liunx 需求:客户端对服务器发送一个TCP连接,连接成功之后发送数据并接收返回数据 代码如下: #include <sys/socket.h> #include <net ...

  8. Unity中的Mathf类

    Mathf.Abs绝对值 计算并返回指定参数 f 绝对值. Mathf.Acos反余弦 static function Acos (f : float) : float 以弧度为单位计算并返回参数 f ...

  9. CG 标准函数库

    (1)数学函数 函数 功能描述 abs(x) 返回输入参数的绝对值 acos(x) 反余切函数,输入参数范围为[-1,1], 返回[0,π]区间的角度值 all(x) 如果输入参数均不为0,则返回tu ...

  10. 初步使用nodejs(一)

    初步使用nodejs(一) 首先打开 https://nodejs.org/,点击INSTALL下载安装 安装完成后 打开CMD 输入node –v 验证是否正常 至此,NODEJS安装完成. 下载W ...