小技巧:用CSS如何实现单行图片与文字垂直居中

css|技巧

  今天又在群中看到一些朋友问单行图片文字垂直居中问题了,于是写了这篇文章.

  这个问题是在做页面中经常会遇到的问题,首行我们先看一下最基础的的吧!

  以下选自(CSS权威指南)

vertical-align
初始值: baseline(缺省值)
可否继承:否
适用于: 内联元素
说明:vertical-align:baseline使元素的基线同父元素的基线对齐.
警告:vertical-align不能影响表格单元中的内容的对齐,对于块元素中的内容也一样.

  文字不多,但时常有人范错误,有人说我用了为什么没有效果呢?首行看一下他的代码.

.style{vertical-align:middle;.....}
HTML:<div class="style"><img src="地址" />...<div>

  分析:从上面的代码可以看出错误就是把样式应用在块元素中了

  我们只需要改样式为

.style img{vertical-align:middle;.....}

  如果STYLE中有其它如INPUT或其它内联元素可写成

.style img,.style.input{vertical-align:middle;.....}

.style *{vertical-align:middle;.....}
/*在不影响其它元素的情况下使用这个通配符*/

  以上是在没有设置高度/行高的事情下,如果加入了高度和行高的事情下FF可以支持,IE6以下则不完全支持,看以下测试结果.(为了增加明显的效果对图片适当增加了高度)

  总结:对于单行图片文字垂直居中(有图片的情况下)

  1.当没有高度行高时,我们只要简单的对内联元素应用vertical-align:middle;就可以了.此外对于一个图片和文字的高度相差无几的,不用这个样式也是可以的.

  2.对于有行高或有行高+高度的,FF可以正确显示,ie6失效.所以也只能对IE6以下版本使用KACK了!,现在IE7已经改正了这个错误.

  3.对2补充一下,可以用不定高度,用上下补白的方法,这样就可以兼容IE6了。

时间: 2024-10-28 02:22:18

小技巧:用CSS如何实现单行图片与文字垂直居中的相关文章

CSS实现同一行的图片和文字垂直居中对齐的方法

 本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法.分享给大家供大家参考.具体分析如下: 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢,很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:middle;这样,它们在同一行就会垂直居中对齐了. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

小技巧:CSS列表标签出现问题的解决办法

css|技巧|解决|问题 DIV CSS网页制作小技巧:li中出现两个以上浮动时 列表标记出现问题的解决办法. 在LI中定义了两个以上float浮动,其中有一个左浮动.IE中列表标记跑到右边,ff中自己定义一行.看下面的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

小技巧:CSS 选择符有哪些?如何合理运用?

css|技巧 CSS selector 选择符是我们进行CSS网页布局的基础.CSS selector到底有哪些,如何合理的运用呢?选择符可以分为三类,除了第一类HTML selector之外,其它两类我们是可以自己命名的,在进行命名时,注意包含语义,或者添加必要的注释,使我们的代码更清晰,易读. HTML selector 标签选择符 HTML selector就是HTML的标签,如:DIV,TD,P,H1等等,如你用 CSS 定义了它们,在CSS文章所控制的页面中这个标签的性质就按照你的定义

python小技巧之批量抓取美女图片_python

其中用到urllib2模块和正则表达式模块.下面直接上代码: [/code]#!/usr/bin/env python#-*- coding: utf-8 -*-#通过urllib(2)模块下载网络内容import urllib,urllib2,gevent#引入正则表达式模块,时间模块import re,timefrom gevent import monkey monkey.patch_all() def geturllist(url):    url_list=[]    print ur

如何让图片或文字垂直居中于div层

垂直居中 具体参照方法如下:以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

告诉CSS新手20个小技巧

感谢有了CSS,真是由于她的灵活性,网页的样式可以完全与代码分离.现在,你仅仅需要有CSS的基础知识,甚至是一个初学者也能够轻易的改变网站的外观. 在过去,我们大量依靠网站设计人员和程序员来帮忙更新网站,甚至一个十分简单的网页也是如此.感谢有了CSS,真是由于她的灵活性,网页的样式可以完全与代码分离.现在,你仅仅需要有CSS的基础知识,甚至是一个初学者也能够轻易的改变网站的外观. 无论你是准备用CSS来创建你自己的网页,还是仅仅想用她来改变你博客的外观,学习CSS基本原则都有助于为你打下CSS的

七个不允许错过的jQuery小技巧_jquery

jQuery是一款轻量级的JavaScript库,是最流行的客户端HTML脚本之一,它在WEB设计师和开发者中非常的有名,并且有非常多有用的插件和技术. 本文我们将为大家分享一些jQuery小技巧: 一.在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: $(document).ready(function() { //select all anchor tags that have http in the href //and apply the target=_blank $("a

PS小技巧:怎么更换天空背景

          PS小技巧:怎么更换天空背景 PS图片处理 PS调色教程 PS文字教程 分类: PS入门教程

Python中输出ASCII大文字、艺术字、字符字小技巧

  这篇文章主要介绍了Python中输出ASCII大文字.艺术字.字符字小技巧,本文首先给出了ASCII大文字.艺术字.字符字的图片效果,然后给出了Python中的实现方法,需要的朋友可以参考下 代码如下: display text in large ASCII art fonts 显示大ASCII艺术字体 这种东西在源码声明或者软件初始化控制台打印时候很有用. 例如下图: 这是查看HTML源码中截图而来,看到这种字体的网站名称,很cool,下面就介绍一下Python中如何输出这种字符字. 代码