Rss订阅

首页 »Html教程 » css实现垂直居中:CSS如何实现单行图片与文字垂直居中？ »正文

css实现垂直居中:CSS如何实现单行图片与文字垂直居中？

来源: 发布时间:星期四, 2009年2月12日浏览:175次评论:0

　　今天又在群中看到

些朋友问单行图片文字垂直居中问题了

于是写了这篇文章．
　　这个问题是在做页面中经常会遇到

问题

首行我们先看

下最基础

吧！
　　以下选自(CSS权威指南)

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
vertical-align

值:　baseline(缺省值)
可否继承:否
适用于:　内联元素
介绍说明:vertical-align:baseline使元素

基线同父元素

基线对齐．
警告:vertical-align不能影响表格单元中

内容

对齐

对于块元素中

内容也

样．

　　文字不多

但时常有人范

有人说我用了为什么没有效果呢？首行看

下他

代码．

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
．style{vertical-align:middle;.....}
HTML:<div

=\"style\"><imgsrc=\"地址\"/>...<div>

　　分析:从上面

代码可以看出

就是把样式应用在块元素中了
　　我们只需要改样式为

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
．styleimg{vertical-align:middle;.....}

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

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
．styleimg,.style.input{vertical-align:middle;.....}
或．style*{vertical-align:middle;.....}/*在不影响其它元素

情况下使用这个通配符*/

　　以上是在没有设置高度／行高

事情下

如果加入了高度和行高

事情下FF可以支持

IE6以下则不完全支持

看以下测试结果．(为了增加明显

效果对图片适当增加了高度)

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"//www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; char<img src='/icons/98698set.gif' />=utf-8\" /><title>单行图文并排垂直居中</title><style type=\"text/css\">.text{	margin:5px 0 15px 0}}.mid{	line-height:50px;	background-color:#CCCCCC;} .mid3{	height:50px;	background-color:#CCCCCC;} .mid2{	line-height:50px;	height:50px;	background-color:#CCCCCC;} .va_m img{	vertical-align:middle;}</style></head><body>无样式和图片 介绍说明: 无样式有图片<img src=\"http://www./Files/BeyondPic/2007-5/24/075241608006787.g<img src='/icons/98698if.gif' />\" width=\"37\" height=\"40\"/> 介绍说明: 只有height 介绍说明: 有height有图片<img src=\"http://www./Files/BeyondPic/2007-5/24/075241608006787.g<img src='/icons/98698if.gif' />\" width=\"37\" height=\"46\"/> 介绍说明: 只有line-height 介绍说明: 有line-height和图片<img src=\"http://www./Files/BeyondPic/2007-5/24/075241608006787.g<img src='/icons/98698if.gif' />\" width=\"37\" height=\"30\"/> 介绍说明: 有line-height又有高度<img src='/icons/98698de.gif' />情况 介绍说明: 有line-height和图片<img src='/icons/98698de.gif' />情况<img src=\"http://www./Files/BeyondPic/2007-5/24/075241608006787.g<img src='/icons/98698if.gif' />\" width=\"37\" height=\"48\"/> 介绍说明: <h2>在上面测试基础中对图片加入vertical-align:middle;</h2>无样式和图片 介绍说明: 无样式有图片<img src=\"http://www./Files/BeyondPic/2007-5/24/075241608006787.g<img src='/icons/98698if.gif' />\" width=\"37\" height=\"12\"/> 介绍说明: 只有height 介绍说明: 有height有图片<img src=\"http://www./Files/BeyondPic/2007-5/24/075241608006787.g<img src='/icons/98698if.gif' />\" width=\"37\" height=\"12\"/> 
		
 
 
 
 
 介绍说明: 只有line-height 介绍说明: 有line-height和图片<img src=\"http://www./Files/BeyondPic/2007-5/24/075241608006787.g<img src='/icons/98698if.gif' />\" width=\"37\" height=\"12\"/> 介绍说明: 有line-height又有高度<img src='/icons/98698de.gif' />情况 介绍说明: 有line-height和图片<img src='/icons/98698de.gif' />情况<img src=\"http://www./Files/BeyondPic/2007-5/24/075241608006787.g<img src='/icons/98698if.gif' />\" width=\"37\" height=\"30\"/> 介绍说明: </body></html>

=\"ubbbuttonrt\">[ 可先修改部分代码再运行查看效果 ]

整理总结:对于单行图片文字垂直居中(有图片情况下)
　　1.当没有高度行高时

我们只要简单

对内联元素应用vertical-align:middle;就可以了．此外对于

个图片和文字

高度相差无几

不用这个样式也是可以

．
　　2.对于有行高或有行高＋高度

,FF可以正确显示,ie6失效．所以也只能对IE6以下版本使用KACK了！

现在IE7已经改正了这个

．
　　3．对2补充

下

可以用不定高度

用上下补白

思路方法

这样就可以兼容IE6了

标签：css文字垂直居中 css图片垂直居中 css垂直居中 css实现垂直居中

下载文章的 PDF文档电子版离线看

我顶

专注于互联网--专注于架构

首页 »Html教程 » css实现垂直居中:CSS如何实现单行图片与文字垂直居中？ »正文

css实现垂直居中:CSS如何实现单行图片与文字垂直居中？

相关文章

读者评论

发表评论

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章