DIV+CSS如何让图片和文字在同一行!
在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如何让图片和文字在同一行!的更多相关文章
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...
- css 如何使图片与文字在div中居中展示?
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
- CSS 之 控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...
- div+css+javascript 走马灯图片轮换显示
效果如图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
(含上下左右滚动代码) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- div+css显示两行或三行文字
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; //需要控制的文本行数 overflow: hidd ...
- div+css显示两行或三行文字,超出用...表示
<style> .comment_inner{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
随机推荐
- Zookeeper学习文档
1. Zookeeper简介 ZooKeeper是一个开源的分布式框架,提供了协调分布式应用的基本服务.它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronizat ...
- 【转】PHP微信上传永久图片素材
$TOKEN="XXXX"; $file = "D:\www\weixin\game.jpg"; $data = array( 'media'=> new ...
- 缩点【洛谷P2921】 [USACO08DEC]在农场万圣节Trick or Treat on the Farm
[洛谷P2921] [USACO08DEC]在农场万圣节Trick or Treat on the Farm 题目描述 每年,在威斯康星州,奶牛们都会穿上衣服,收集农夫约翰在N(1<=N< ...
- SpriteBuilder 不能 Portrait
最近用最新的SpriteBuilder V1.3.6和Xcode 6.0.1,发现一个bug.就是在使用Xcode6的时候的SpriteBuilder已经在Project settings 里面设置了 ...
- 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 ...
- springcloud系列九 整合Hystrix Dashboard
Hystrix Dashboard是Hystrix的仪表盘组件,主要用来实时监控Hystrix的各项指标信息,通过界面反馈的信息可以快速发现系统中存在的问题. 整合快速体验: pom.xml(这个是F ...
- maven 子父工程。。。
子工程module 父工程 主要是注意路径问题..否则会报错---
- 自定义Razor 标签
1.首先需要一个abstract class WebViewPage<T> ,继承系统的 System.Web.Mvc.WebViewPage<TModel> 再定义一个Web ...
- hdu-2036求任意多边形面积
改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- Go语言基础之20--web编程框架之Gin框架
一.Gin框架介绍 1.1 简介 A. 基于httprouter开发的web框架. http://github.com/julienschmidt/httprouter B. 提供Martini风格的 ...