大小不固定的图片和多行文字的垂直水平居中
一、大小不固定,多行文字的垂直居中
① 单行文字
可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如:
单行文字居中显示测试,css样式为:height:3em; line-height:3em;……
② 多行文字
但是对于外框高度固定,文字大小个数不固定的多行文字呢?
文字可能一行显示,也有可能多行显示;文字可能是小号字体,也有可能是大号的。这时候如何让其垂直居中显示呢?看下面!
这里的文字用来做多行文字垂直居中对齐的测试。
这是第二行文字,您还可以再添加一行文字做测试!
上面所展示的就是多行文字垂直居中的效果!
HTML结构如下:
这里显示多行文字。
css代码如下:
.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}.zxx_align_box_2 span.zxx_align_word{display:inline-block; font-size:0.1em; vertical-align:middle;}
实现的原理:
说白了,就是把文字当图片处理。用一个span标签将所有的文字封装起来,设置文字与图片相同的display属性(inline-block属性),然后用处理图片垂直居中的方式处理文字的垂直居中即可。
有几点简要说明:1.此例子用em做单位,如果您对em单位了解不够,把握不来的话,可以使用px做单位,值要换;2.外部div不能使用浮动;3.外部div高度和文字大小比例1.14为宜;4.内部标签的vertical-align:middle可以省略,但是外部div高度和文字大小比例要修改,我自己试了一下,高度比字体1.5左右的样子;5.系统原因,我没能够在IE8下测试。
对于一些细化的原理,将在图片垂直居中处讲一下。
二、大小不固定,图片的垂直居中
① 透明gif图片+背景定位
这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法,对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。
方法的原理很简单,使用一个透明的gif图片做覆盖层,高宽拉伸至所需要的大小,然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上,因为实际项目中,这肯定是个动态的URL地址,css文件似乎不支持动态URL地址。下面就是此方法的实例表现。
HTML部分(仅示例一张图片,其他重复,故略):
css部分:
.zxx_align_box_3 li{width:1em; height:1em; padding:0.1em; margin:0 0.1em 0 0; font-size:128px; float:left; border:1px solid #beceeb;}.zxx_align_box_3 li img{display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center;}
② display:table-cell和文字大小控制居中
据说这个方法是淘宝的工程师想到的,确实是不错的方法!但是下面展示的却不是原版,而是我的修改版,去掉了没有必要的hack。
HTML部分(仅示例一张图片,其他重复,故略):
css部分:
.zxx_align_box_4 li{float:left; margin-right:13px;}.zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}.zxx_align_box_4 li div img{vertical-align:middle;}
需要说明的:
1.原版的代码中有两个hack,一个是针对文字大小的,另外一个是针对block属性的;后经过我测试推敲后证实这两个hack都是多余的,而*display:block更是多余,因为IE6,IE7根本就不认识display:table-cell是谁!
2.这个通过文字大小控制IE下图片垂直居中是个很不错的方法,要比使用position:relative这类高消耗的css方法要好多了。但是这个方法不足之处在于:不支持img外标签的浮动,所以当多图片显示时需要再在外面嵌套一层标签——资源消耗多了!
3.高度:文字大小=1.14,这个比例我一直记着,但是后来我将这个比例的概念淡化了,原因在于多次遇到其他比例实现效果的情况。例如上面,就是1:1实现的。4.这个方法巧妙的应用了IE默认文字空间的概念,然而这个默认文字空间是看不见,摸不着的,较抽象,不好理解,使用者多记住用法,深层次原因不太理解,不易上手。但是,这里我要转折一下,我想到了一种方法,将抽象默认文字空间的概念具体出来,实现了更加容易理解,更加方便使用,更加利于维护的新方法,这就是最后一种方法。
③ display:inline-block和文字大小控制居中
这是我自己想到的方法,代码相当简洁,是个成本很低,效果惊人的方法,适用于多图显示的情况。只需要一层必须要的a标签就解决问题了!
HTML部分(仅示例两张图片,其他重复,故略):
css部分:
.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}.zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}
需要说明的:
1.img外的标签需是a标签或span这类inline属性的标签,div标签也可以,但是css代码多些:display:inline; display:inline-block先变成inline属性,再转变成inline-block属性,原因讲起来又是一篇长长的文章,放着。2.此方法只需要两层标签即可,可谓代码超简洁,但是只适用于多图垂直居中对齐的情况。因为其对齐原理是相邻的图片居中对齐,如果只是一个图片,vertical-align:middle就只有与空格对齐了。
④ 使用空白图片实现垂直对齐
好吧,我知道说大话会被人笑的,但是我还是非常自信地推荐下面这种我想出来的图片垂直居中对齐的方法。非常简单,非常易懂,出错率低,上手方便,兼容性上佳!
HTML部分(仅示例一张图片,其他重复,故略):
css部分:
.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;}.zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;}.zxx_align_box_6 li .show_img{vertical-align:middle;}
原理简述:
一句话,将要显示的图片与一张透明的高度100%,宽度1像素的透明图片vertical-align:middle对齐。其核心原理其实与第二种利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大,目的是撑开IE下默认文字空间的高度,其性质类似于空格,然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐;而这里将这个看不见的文字空间实例成一张透明的gif图片,高度可以轻松设置为外部标签的高度,然后通过vertical-align:middle对齐,就实现效果了,在各个浏览器下都是一样的表现,不需要担心什么兼容性的问题。而且代码很简单,很易懂,想出错都难!
相关文章
- CSS颜色字体代码,颜色大全css字体颜色
- 版面设计教案
- 国家电网公司职称计算机水平考试上机试卷
- 职称考试PPT题库
- 怎么制作个人简历表(共6篇)
- 高中计算机会考试题及答案
- 初中信息技术教学知识点整理
- 党政机关标准公文模板制作方法示例
- 办公软件教案
0CSS 颜色大全 css 字体颜色 CSS 颜色大全 css 字体颜色,将颜色代码代替css里面的颜色,就可以. div中控制某段字体 颜色 html代码 div id=sidebar spanCSS 颜色大全 css 字体颜色/span ...
<版面设计>课程教案 课 程名 称 版面设计 课 程类 别 必 修 授 课班 级 艺术设计 任 课教 师 苟耀春 教研室主任 谭国华 系 主 任 籍明明 所 在院(系) 人文科学系 课程教学基本信息 第一章 版式设计概念 第一节 ...
国家电网公司职称计算机水平考试上机试卷(二) ------------------------------------------------------------------------------------------------- ...
一.PowerPoint2003基础:暗暗 1-1. 在当前窗口将Powerpoint的菜单打开方式设置为"滑动":[视图/工具栏/自定义](或右击„„ 1-2. 略 2.关闭"常用"."格 ...
篇一:如何制作个人简历表格 如何制作个人简历表格 2009年06月01日 星期一 11:36 具体步骤如下: ★初始化页面 1. 新建一个word文档,按"ctrl+s"快捷键将其保存为"个人简历". ...
高中计算机会考试题及答案(2) 2007-11-16 23:20 1.在默认方式下,Excel 2000工作表的列以( C )标记. A.数字+字母B.字母+数字C.数字D.字母 2.多媒体计算机是指具有( D )能力的计算机? A.播放声 ...
本知识点整理是结合济南市初中信息技术学业水平考试272个考点,和教材内容整理,供本次开展主题教学之用,在本次片区教研时,标注出本片区主题教学中所涉及到的模块和模块中的知识点,哪些知识点没有涉及.供后期教研活动用.不当之处敬请自行修改,共同探 ...
对照标准制作模板 规范格式方便应用 --党政机关标准公文模板制作方法(示例) 徐州市政协 徐智勇 文章摘要: 如何规范党政机关行政公文的格式?如何使印发的行政公文符合<国家行政机关公文处理办法>和<国家行政机关公文格式&g ...
办公软件 办公软件:Office2003, 由美国·微软件公司开发,包括了: Word:文字处理软件/字表处理软件 Excel:电子表格 Power point:幻灯片 Word2003 第一课 一. Word 的基本功能 1. 文字处理, ...