大小不固定的图片、多行文字的水平垂直居中

这篇文章发布于 2009年08月28日,星期五,01:11,归类于 CSS相关。 阅读 390729 次, 今日 9 次 98 条评论

 

作者添加于2017年12月31日:本文很老,仅供参考。

本文综述

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。

关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签;需要记住一些比例参数,上手较难;原理艰深,兼容性不稳定等。但是在我看来,这个方法不足够好!本文将提供两种更为新颖的方法,代码简洁,原理简单,上手容易,兼容性强,出错率低的方法。inline-block裸标签对齐法,以及透明图片拉伸对齐法

css是如此的精深,我相信后来人会有更加绝妙的方法。但是,本文提供的几种实现图片垂直居中方法,一定是目前最实用的几种方法。

一、大小不固定,多行文字的垂直居中

① 单行文字

可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码:

height:3em; line-height:3em; ……

显示结果如下图:

单行文本垂直居中对齐-鑫空间-鑫生活

② 多行文字

如何实现父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐呢?
实现的关键是把文字当图片处理。用一个<span>标签将所有的文字封装起来,设置文字与图片相同的display属性值(inline-block属性),然后用处理图片垂直居中的方式处理文字的垂直居中即可。
核心css代码如下,
外部<div>标签:

div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}

内部<span>标签:

span{display:inline-block; font-size:0.1em; vertical-align:middle;}

下面这张是实例演示页面的效果截图:

行数不固定文字垂直居中对齐

有几点简要说明:

  1. 此例子用em做单位,如果您对em单位了解不够,把握不来的话,可以使用px做单位,值要换;
  2. 外部div不能使用浮动;
  3. 外部div高度和文字大小比例1.14为宜;
  4. 内部标签的vertical-align:middle可以省略,但是外部div高度和文字大小比例要修改,我自己试了一下,高度比字体1.5左右的样子;
  5. 系统原因,我没能够在IE8下测试。

实现的最终效果和JavaScript演示,您可以狠狠地点击这里去看看。

二、大小不固定,图片的水平垂直居中

① 透明gif图片+背景定位的方法

这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法,对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。
方法的原理很简单,使用一个透明的gif图片做覆盖层,高宽拉伸至所需要的大小,然后给这个gif图片一个background-position:center声明。而background-image建议写在页面上,因为实际项目中,这肯定是个动态的URL地址,css文件似乎不支持动态URL地址。下面就是实例演示页面的效果截图。

透明图片背景居中定位效果

核心HTML代码为:

<img src="../image/pixel.gif" style="background-image:url(mm1.jpg);" />

其中此img标签已经设置了高宽和背景居中定位的属性。具体实现可以可以狠狠地点击这里进行参照。

② display:table-cell和文字大小控制居中

这个方法可以说就是本文综述部分提到的淘宝团队想出的图片垂直居中的方法。但是本文展示的这个方法的css代码又不是淘宝工程师们的原版代码,我对其做了一定的修改,把里面没有用可以剔除的hack都去掉了。

css代码部分:
<img>外部<div>标签:

div {display:table-cell; width:1em; height:1em; font-size:144px; width:144px; height:144px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle;}/*这里的大小是根据高宽上限128像素图片设置的*/

img标签:

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实现的。

这里附上效果截图:

table-cell下的水平垂直居中效果截图

图片和文字比不上直接的效果显示,所以建议您狠狠地点击这里

③ display:inline-block和文字大小控制居中

此方法的灵感来自于Google picasa相册的图片显示,代码相当简洁,是个成本很低,效果惊人的方法。适用于多图显示的情况。基本上用裸标签就实现了想要达到的效果。一般而言,图片阵列排列显示的时候,外面都有一个a标签的,起到链接的作用。而本处的方法就只要这一个<a>标签就足以实现图片垂直且居中的显示效果。其关键是将<a>标签默认的inline属性值设置为inline-block,这样<a>标签既支持宽度,又支持vertical-align:middle,配合<img>vertical-align:middle就可以实现图片的水平垂直居中显示了。
css代码:
<a>标签:

a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}

img标签:

img{vertical-align:middle;}

就这么简单,就实现了图片的垂直居中效果。下截图为证:

精简方法实现的水平垂直居中对齐

另外补充说明的:<img>外的标签需是<a>标签或<span>这类inline水平的标签,<div>标签也可以,但是css代码多些: display:inline-block;*display:inline; zoom:1; IE下要先变成inline属性,再转变成类似于inline-block的属性,原因讲起来又是一篇长长的文章,放着。

建议您狠狠地点击这里直接查看源代码

④ 透明图片拉伸对齐实现垂直居中显示

这个方法是自认为相当不错的一个方法,说实话,想到这个方法是自然而然的,经过试验发现真的很管用。对比淘宝团队的方法,发现优势很多,基本上淘宝的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 loading="lazy" src="https://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:1px; vertical-align:middle;}
li .alpha_img{height:100%; width:0; vertical-align:middle;}
li .show_img{vertical-align:middle;}

其实,只要有上面绿色部分的css代码就足够了。
简单的超乎想象。

要显示的图片后面跟了一个高度撑满容器,只有1px宽,宽度为0即可,透明的图片。这两个图片分别vertical-align:middle,就实现了要显示的图片与这个拉伸的透明图片的居中对齐了,由于透明图片是透明的,不可见的,宽度也只有1像素宽度也为0,所以看上去就是要显示的图片相对于容器垂直居中了。

另外,其实这里不一定是透明的图片,使用任意的图片都可以,所以您其实说不定可以减少一次http请求,使用任意的图片将其拉伸至高度为容器高,宽度1像素宽度0就可以了。

甚至,使用<span>标签,<div>标签也可以实现同样的效果。只要将<span>标签或<span>标签转换成inline-block表现或类似于inline-block表现就可以了。
我个人更推荐使用行内元素,例如<span><i>标签等,只要应用类似下面的CSS:

span{display:inline-block; height:100%; width:0; vertical-align:middle;}

相比图片而言,多了个display:inline-block,但是会少一次链接请求。效果图和上面的一样的,完美的水平垂直居中。原理也与图片一样,相信很容易理解的。

再提供一下实例页面的链接,狠狠地点击这里,实例页面的最后一种方法向您展示了这种新颖的图片垂直居中的方法。

最后,说句实在话,我知道这应该不算什么新颖的方法,在我之前想到这种方法的人肯定不在少数,但是留迹于网上的却没有,我是没有发现过。我不清楚是这些大牛的公司要求技术保密,还是自身不愿分享研究成果。我相信不是这样的,主要还是他们很忙碌,没有时间写这些东西。像我这样,”闲暇”的很,花十几个小时写一篇文章的估计不多,呵呵。

补充于2009-11-03 15:32
正如我经常挂在嘴边的,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 img{vertical-align:middle;}

.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;}

可以看到,代码非常简洁易懂,HTML部分代码就不上了,您可以单击下面的demo,里面有HTML代码的展示以及效果的预览。

建议您狠狠地单击这里:独立的demo实例页面

(本篇完)

分享到:


发表评论(目前98 条评论)

  1. 书生说道:

    前辈第一种方法是不是要添加个background-size: contain才行?

  2. 李小虎说道:

    张老师 多行文字居中 父元素div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}这样设置

    子元素不用设置任何样式就可以垂直居中?

  3. Charles说道:

    试试这个
    img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    }

  4. 阿力说道:

    也就是把外围的div高度也换成px,也就是文中的em全换成px后,并且没有遵循1:1.4的比例

  5. 阿力说道:

    试了鑫大大的文中的多行文字居中的例子,copy代码放在chrome 下,效果是中线偏下,当所文字的大小换成px后就没问题了,严格剧中,文字上下空白大小完成一致

  6. Han说道:

    感觉每次使用vertical-align: middle;的时候,图片和旁边的文字就没有对齐过,每次图片都靠下,基本还要加上margin-top:-3px;看着才居中。。。

    • 锤石的故事集说道:

      那是因为你 图片和文字 的父级 要设置font-size:0 ,才能消除行内设置带来的问题

  7. yvonne说道:

    对于③ display:inline-block和文字大小控制居中方案

    我在demo测试的时候,图片居中了,但是有a标签之间inline-block产生的导致外层div在图上面总存在一个高度的问题(bfc?)

    在div上增加一个line-height:1em,解决了问题。

  8. 九天说道:

    博主你好,我想问为什么两个图片分别vertical-align:middle,就实现了要显示的图片与这个拉伸的透明图片的居中对齐了呢?= = 问题好小白不要嫌弃我

  9. huhu说道:

    .img-box{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 0;
    }
    .img-box img{
    max-width: 90%;
    max-height: 90%;
    vertical-align: middle;
    }

    之前的方案不是绝对垂直居中,根据不同字体不同的偏移量和字体大小的不同,图片偏移也不同。
    如果居中的inline-block元素同级没有文字,设置font-size: 0;到是可以使它绝对的居中,可以兼容到IE8,IE7可以在inline-block元素同级加点无用字符也可实现居中,无IE6 不知效果

  10. huhu说道:

    .img-box{ width: 200px; height: 200px; line-height: 200px; text-align: center;}
    .img-box img{ max-width: 90%; max-height: 90%; vertical-align: middle; margin-top: -.5ex;}

    这种实现方式可取吗

  11. whoami说道:

    关于淘宝那种方法,我发现如果设置了图片的verticle-align,反而会出问题

  12. linwen说道:

    css一行写完,观看体验不好

  13. 前端小菜鸟说道:

    我把那些代码复制粘贴到Hbuilder里运行,怎么都没有垂直居中呢?

  14. shu说道:

    为什么要设置font-size,我这边设置之后,反而就不居中了

    • 杨小侨说道:

      我试了一下。跟文档声明有关。现在都直接用Html5的文档声明。而作者的用的是XHTML 1.0 Transitional的声明

  15. noob bird说道:

    这广告太牛X了,我的插件都拦不住,。,。

  16. yeching说道:

    我发现还有一个新的方法,在图片前添加一个空元素(相当于单行文字)作为参照,就可以正常使用vertical-align:middle;

    /*css代码*/
    #imagebox{width:500px;height:100px;border:1px solid blue;text-align:center;}
    #imagebox:before{content:””;visibility:hidden;line-height:100px;/*盒子高度*/}
    #imagebox img{vertical-align:middle;}

    • yeching说道:

      对于多行文字也同样可以实现,只不过包含文字的容器得设置属性display:inline-block;

      • 前端小菜鸟说道:

        把这个去掉#imagebox:before{content:””;visibility:hidden;line-height:100px;/*盒子高度*/}
        照样可以居中

  17. 彬仔说道:

    ② display:table-cell和文字大小控制居中;这里为什么要用文字大小控制呢?我不设文字大小,好像也是居中的,而且设了文字大小以后,只有font-size小于118px才居中。这又是为什么呢?初学者,忘鑫爷赐教。

  18. lucitas说道:

    博主你好 我想问下 如果我的图片想相对于整个浏览器垂直居中的话,怎么办。我图片外层用div,然后用绝对定位 设置宽度为100%,但是设置vertic-align:middle。没有反应为什么,我看了div的高度是整个页面的高度啊 为什么img不能垂直居中。

  19. 所示说道:

    现在广告也太多了吧,动不动弹一个广告

  20. ziven27说道:

    我在IEtester里面看到直接如下代码就可以兼容IE678了:

    .zxx_ul_image li{float:left; width:150px; text-align:center; line-height:150px; _font-size:125px; }
    .zxx_ul_image li img{vertical-align:middle;}

    是IEtester里面有问题吗?

  21. Todd_hua说道:

    说白了就是图片后面加一个额外的空标签(类似ie的空白幽灵节点),撑开高度,实现垂直居中。

  22. lining说道:

    父容器高度固定,文字行数不固定的情况下。不用用span包裹文字,直接给外层div元素display:table-cell;vertical-align:middle;就能实现了。为什么还要给再给文字加一个span标签裹着还写那么多样式。

  23. 夕颜说道:

    张老师,我发现如果声明的是html5的文档模型,就不能用display:table-cell;这种方式了,我是用的px布局,font-size会改变盒子的高度,不知道是为什么。

  24. 78说道:

    可不可以直接在里面套一个table来解决呢,因为做了这么多事,还是把div table化,是不是用table有什么不好呀

  25. 朝夕说道:

    以上font-size:不行啊,
    用line-height就可以了