在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. 如何利用CSS代码使图片和文字在同一行显示且对齐

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

  2. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  3. css 如何使图片与文字在div中居中展示?

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

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

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

  5. div+css+javascript 走马灯图片轮换显示

    效果如图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码

    (含上下左右滚动代码) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. div+css显示两行或三行文字

    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; //需要控制的文本行数 overflow: hidd ...

  8. div+css显示两行或三行文字,超出用...表示

    <style> .comment_inner{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. Zookeeper学习文档

      1. Zookeeper简介 ZooKeeper是一个开源的分布式框架,提供了协调分布式应用的基本服务.它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronizat ...

  2. 【转】PHP微信上传永久图片素材

    $TOKEN="XXXX"; $file = "D:\www\weixin\game.jpg"; $data = array( 'media'=> new ...

  3. 缩点【洛谷P2921】 [USACO08DEC]在农场万圣节Trick or Treat on the Farm

    [洛谷P2921] [USACO08DEC]在农场万圣节Trick or Treat on the Farm 题目描述 每年,在威斯康星州,奶牛们都会穿上衣服,收集农夫约翰在N(1<=N< ...

  4. SpriteBuilder 不能 Portrait

    最近用最新的SpriteBuilder V1.3.6和Xcode 6.0.1,发现一个bug.就是在使用Xcode6的时候的SpriteBuilder已经在Project settings 里面设置了 ...

  5. Job for postfix.service failed because the control process exited with error code. See "systemctl status postfix.service" and "journalctl -xe" for details.

    这是因为防火墙或者配置文件导致,无法启动的邮件服务!! 首先关闭防火墙! 修改配置文件 vim /etc/postfix/main.cf inet_protocols = ipv4 inet_inte ...

  6. springcloud系列九 整合Hystrix Dashboard

    Hystrix Dashboard是Hystrix的仪表盘组件,主要用来实时监控Hystrix的各项指标信息,通过界面反馈的信息可以快速发现系统中存在的问题. 整合快速体验: pom.xml(这个是F ...

  7. maven 子父工程。。。

    子工程module 父工程 主要是注意路径问题..否则会报错---

  8. 自定义Razor 标签

    1.首先需要一个abstract class WebViewPage<T> ,继承系统的 System.Web.Mvc.WebViewPage<TModel> 再定义一个Web ...

  9. hdu-2036求任意多边形面积

    改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  10. Go语言基础之20--web编程框架之Gin框架

    一.Gin框架介绍 1.1 简介 A. 基于httprouter开发的web框架. http://github.com/julienschmidt/httprouter B. 提供Martini风格的 ...