大小不固定的图片和多行文字的垂直水平居中
来源:互联网 发布:复杂网络 院士 编辑:程序博客网 时间:2024/05/21 00:00
①透明gif图片+背景定位
这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法,对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。
方法的原理很简单,使用一个透明的gif图片做覆盖层,高宽拉伸至所需要的大小,然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上,因为实际项目中,这肯定是个动态的URL地址,css文件似乎不支持动态URL地址。下面就是此方法的实例表现。
透明图片和背景定位实现图片水平垂直居中
HTML部分(仅示例一张图片,其他重复,故略):
<ul class="zxx_align_box_3 fix"> <li> <img src="../image/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg);" /> </li></ul>
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。
table-cell和文字大小实现的图片垂直居中显示
HTML部分(仅示例一张图片,其他重复,故略):
<ul class="zxx_align_box_4 fix"> <li> <div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></div> </li></ul>
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;}/*这里的大小是根据高宽上限128像素图片设置的*/.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部分(仅示例两张图片,其他重复,故略):
<div class="zxx_align_box_5 fix"> <a href="#zhangxinxu"> <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /> </a> <a href="#zhangxinxu"> <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /> </a></div>
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就只有与空格对齐了。
④ 透明图片拉伸对齐实现垂直居中显示
这个方法是我自认为相当不错的一个方法,说实话,想到这个方法是自然而然的,经过试验发现真的很管用。对比淘宝团队的方法,发现优势很多,基本上淘宝的table-cell+font-size方法会带来的些问题都避免了。
非常简单,非常易懂,出错率低,上手方便,兼容性上佳!
原理简述:
一句话,将要显示的图片与一张透明的高度100%,宽度1像素的透明图片vertical-align:middle对齐。
其核心原理其实与利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大,目的是撑开IE下默认文字空间的高度,其性质类似于空格,然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐;而这里将这个看不见的文字空间实例成一张透明的gif图片,高度可以轻松设置为外部标签的高度,宽度压缩至最小,然后通过vertical-align:middle对齐,就实现效果了,由于影响布局的差不多就vertical-align:middle这一个属性,所以出现兼容性问题的可能性比table-cell的方法要低得多。
需要注意的:
1.img外容器宽度要大于要显示的图片的最大宽度+1像素;
2.img外容器的字体大小设为0px,也可以不设,但是两个img标签要连着写,避免空格;
HTML部分:
<li> <img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><img src="../image/pixel.gif" /></li>
css部分:
li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;}
li .alpha_img{height:100%; width:0; vertical-align:middle;}li .show_img{vertical-align:middle;}
其实,只要有上面绿色部分的css代码就足够了。简单的超乎想象。
要显示的图片后面跟了一个高度撑满容器,,宽度为0即可,透明的图片。这两个图片分别vertical-align:middle,就实现了要显示的图片与这个拉伸的透明图片的居中对齐了,由于透明图片是透明的,不可见的,宽度也为0,所以看上去就是要显示的图片相对于容器垂直居中了。
另外,其实这里不一定是透明的图片,使用任意的图片都可以,所以您其实说不定可以减少一次http请求,使用任意的图片将其拉伸至高度为容器高,宽度0就可以了。
我个人更推荐使用行内元素,例如span,i标签等,只要应用类似下面的CSS:
span{display:inline-block; height:100%; width:0; vertical-align:middle;}
相比图片而言,多了个display:inline-block;但是会少一次链接请求。效果图和上面的一样的,完美的水平垂直居中。原理也与图片一样,相信很容易理解的。
最后,说句实在话,我知道这应该不算什么新颖的方法,在我之前想到这种方法的人肯定不在少数,但是留迹于网上的却没有,我是没有发现过。我不清楚是这些大牛的公司要求技术保密,还是自身不愿分享研究成果。我相信不是这样的,主要还是他们很忙碌,没有时间写这些东西。像我这样,”闲暇”的很,花十几个小时写一篇文章的估计不多,呵呵。
补充:
正如我经常挂在嘴边的,css博大精深,你需要花费精力去观察它,研究它。这里,我再提供一种我刚刚试验出来的一种新方法,实现大小不固定的图片水平垂直居中,综合来讲,比上面所有提供的方法还要优秀,且没有hack,兼容性上佳(支持IE6、IE7、Firefox、chrome、Safari浏览器-IE8未测(补充:我后来又测试了一下,结果在IE8浏览器和Opera浏览器下是不垂直居中的,所有此方法还是有待商榷的)。下为在IE7下的效果截图:
此方法原理是,在IE下使用font-size使图片垂直居中显示,Firefox,chrome等现代浏览器使用line-height配合img本身的vertical-align属性使垂直居中显示,由于两者不冲突,所以没有hack就实现的效果。css代码简洁明了,关键是HTML代码非常清晰,一层外标签,里面就是img标签,我想很难再找出比这个方法更出色的让图片水平垂直居中的方法了。好吧,其实这个方法是有一点不完美的,就是opera浏览器下图片无法垂直居中显示,幸好国内而言,使用opera浏览器的比例很低,所以综合来讲这个方法是个非常优秀的图片水平垂直居中的方法。
css代码:
.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}.zxx_ul_image li:after{content:' '; vertical-align:middle;}.zxx_ul_image li img{vertical-align:middle;}
补充:
:after伪类+content 让大小不固定图片垂直居中
这里介绍的:after伪类+content实现的图片垂直居中方法是我目前为止个人觉得最好,最实用的方法。
CSS代码如下(绿色部分为功能相关CSS代码):
.pic_box{width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}.pic_box img{vertical-align:middle;}.pic_box:after{display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}
HTML代码如下:
<span style="font-size:12px;"><div class="pic_box"> <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /></div></span>
- 大小不固定的图片和多行文字的垂直水平居中
- 大小不固定的图片和多行文字的垂直水平居中
- CSS大小不固定的图片和多行文字的垂直水平居中
- 大小不固定的图片和多行文字的垂直水平居中
- 大小不固定的图片和多行文字的垂直水平居中
- 大小不固定的图片和多行文字的垂直水平居中
- 大小不固定的图片和多行文字的垂直水平居中
- 大小不固定的图片和多行文字的垂直水平居中
- 大小不固定的图片、多行文字的水平垂直居中
- 大小不固定的图片、多行文字的水平垂直居中
- 大小不固定的图片、多行文字的水平垂直居中
- 大小不固定的图片、多行文字的水平垂直居中
- 大小不固定的图片、多行文字的水平垂直居中
- 大小不固定的图片、多行文字的水平垂直居中
- 大小不固定的图片、多行文字的水平垂直居中
- 大小不固定的图片、多行文字的水平垂直居中
- 大小不固定的图片、多行文字的水平垂直居中
- 大小不固定的图片、多行文字的水平垂直居中
- 1、面向对象和面向过程的区别
- 一道题识别不靠谱的程序员
- 【VS开发】使用CTabView分割多页卡窗口
- python数字图像处理:直方图与均衡化
- 网上看到的学习maven不错的几篇博文
- 大小不固定的图片和多行文字的垂直水平居中
- 碎片和活动之间进行通信、碎片之间进行通信
- UVa 1584 Circular Sequence
- platform简述
- Java 对象初始化过程
- C++中虚函数工作原理和(虚)继承类的内存占用大小计算
- R cannot be resolved to a variable
- Android双击返回键(Back)退出应用程序
- Android官方开发文档Training系列课程中文版:打印内容之HTML文档打印