div内图⽚和⽂字⽔平垂直居中
⼤⼩不固定的图⽚、多⾏⽂字的⽔平垂直居中
本⽂综述
想必写css的都知道如何让单⾏⽂字在⾼度固定的容器内垂直居中，但是您知道或者想过让⾏数不固定的⽂字在⾼度固定的容器内垂直居中呢？本⽂将会告诉你如何实现多⾏⽂字的垂直居中显⽰。
关于图⽚垂直居中显⽰，想必很多写css的⼈都研究过，或者说是搜寻过⽅法。淘宝团队似乎提供了⼀种不错的，⽤font-size解决IE下垂直居中的问题，是个好⽅法吗？是的，⽅法是不错，可是问题也很多：不⽀持img外标签的浮动，致使多图⽚排列时需添加额外标签；需要记住⼀些⽐例参数，上⼿较难；原理艰深，兼容性不稳定等。但是在我看来，这个⽅法不⾜够好！本⽂将提供两种更为新颖的⽅法，代码简洁，原理简单，上⼿容易，兼容性强，出错率低的⽅法。，以及。
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 center的属性。⽽background-image建议写在页⾯上，因为实际项
⽬中，这肯定是个动态的URL地址，css⽂件似乎不⽀持动态URL 地址。下⾯就是实例演⽰页⾯的效果截图。
透明图⽚和背景定位实现图⽚⽔平垂直居中
核⼼HTML代码为：
<img src="../image/pixel.gif" />
css设置文字垂直居中其中此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; ver 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实现的。
这⾥附上效果截图（取⾃IE6浏览器）：
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 data-src="image.zhangxinxu/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标签或div标签转换成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;}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论