如何使用vertical-align让图片和文字实现真正的垂直居中对齐
众所周知，css的vertical-align是设置行内元素或者行内块元素在父元素中垂直方向的对齐方式。w3cschool上也说明了各个值及其对齐的方式，但在实践中，我们发现结果往往不像预想的那样。比如，我们在工作中会经常遇到将图片和文字垂直居中对齐的情况，这时我们首先想到将图片设置成vertical-align:，如下图片没有设置vertical-align:时的情况代码片段 1效果预览
&!DOCTYPE html&
&head lang=&en&&
&meta charset=&UTF-8&&
&title&&/title&
font-size: 70
height: 150
background-color:
width: 150
height:150
background-color:
&div&&img src=&& /&为该公司的sdfsdf&/div&
上面的情况完全无法直视，我们给图片添加vertical-align:试下代码片段 2效果预览
&!DOCTYPE html&
&head lang=&en&&
&meta charset=&UTF-8&&
&title&&/title&
font-size: 70
height: 150
background-color:
width: 150
height:150
background-color:
vertical-align:
&div&&img src=&& /&为该公司的sdfsdf&/div&
上面的情况貌似是垂直居中对齐了，但仔细一看发现文字明显往上偏了些，还是达不到我们的要求。经过实践发现，如下方式可以实现完全的垂直居中对齐（其实这种方式只能保证图片和文字包含块的中心相互对齐，如果要保证图片和文字包含块在父元素里是垂直居中的，那么只有当img或者文字包含块的高度比父元素的line-height还要大一定值（字符x下沉距离的2倍）的时候才能实现）代码片段 3效果预览
&!DOCTYPE html&
&head lang=&en&&
&meta charset=&UTF-8&&
&title&&/title&
font-size: 70
height: 150
background-color:
width: 150
height:150
background-color:
vertical-align:
display: inline-/*加不加都无所谓*/
vertical-align:
&div&&img src=&& /&&span&为该公司的sdfsdf&/span&文革万股速度sweg&/div&
完全按照上面的做法，但是一种是img和文字包含块的高度都没有比父元素的line-height大一定的值，而另一种是存在一个块的高度比父元素的line-height大一定的值，结果如下代码片段 4效果预览
&!DOCTYPE html&
&head lang=&en&&
&meta charset=&UTF-8&&
&title&&/title&
font-size: 70
background-color:
width: 150
background-color:
vertical-align:
display: inline-/*加不加都无所谓*/
vertical-align:
&div&&img src=&& /&&span&为该公司的sdfsdfx&/span&x文革万股速度sweg&/div&
&br /&&br /&&br /&&br /&&br /&
&div style=&line-height:0&&&img src=&& /&&span style=&line-height:&&为该公司的sdfsdfx&/span&x文革万股速度sweg&/div&
当图片的高度比文字的高度大很多时，如果只设置图片vertical-align:，视觉上看起来像是文字与图片垂直居中对齐了，不需要进一步处理；但当图片的高度比文字的高度大不了多少甚至还小一些的时候，就需要将文字包裹在一个inline或者inline-block元素内，同时设置图片和这个inline或者inline-block元素为vertical-align:，这样达到的效果才是实现真正的垂直居中对齐。至于深层原因，就涉及到CSS基线和浏览器的渲染机制了，有兴趣的朋友可以去深究。这里说下个人的观点：当将行内元素或者行内块元素设置成vertical-align:时，浏览器将元素垂直方向的中线与父元素垂直方向的中线对齐；没有被行内元素或者行内块元素包裹的文字，浏览器将文字的中线（下图中字母x顶部的那条线）和基线（下图中字母x底部的那条线）的中间点与父元素垂直方向的中线对齐，而文字的底线（下图中最底部的那条线）到基线的距离本来就比顶线（下图中最顶部的那条线）到中线的距离小一些，所以导致了我们看到的文字的整体位置不是真正的垂直居中，而是偏上一些。
88 总笔记数
7.8万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
div的垂直居中问题vertical-将行距增加到和整个DIV.doc 32页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
需要金币：90 &&
div的垂直居中问题vertical-将行距增加到和整个DIV
你可能关注的文档：
··········
··········
div的垂直居中问题vertical-align:将行距增加到和整个DIV一样高line-height:200然后插入文字，就垂直居中了。缺点是要控制内容不要换行2.margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:例如：&#divid=”imfloat”&相应的css为#IamFloat{float:margin:5/*IE下理解为10px*/display:/*IE下再理解为5px*/}3.浮动ie产生的双倍距离#box{float:width:100margin:000100//这种情况之下IE会产生200px的距离display://使浮动忽略}这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);#box{display://可以为内嵌元素模拟为块元素display://实现同一行排列的效果4.IE与宽度和高度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box{width:80height:35}html&body#box{width:height:min-width:80min-height:35}页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个&div&放到&body&标签下，然后为div指定一个类,然后CSS这样设计：#container{min-width:600width:e-xpression(document.body.clientWidth&600?&600px&:&auto&);}第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。6.DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.#box{float:width:800}#left{float:width:50%;}#right{width:50%;}*html#left{margin-right:-3//这句是关键}&divid=&box&&&divid=&left&&&/div&&divid=&right&&&/div&&/div&7.IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。8.float的div闭合;清除浮动;自适应高度;①例如：&#divid=”floatA”&&#divid=”floatB”&&#divid=”NOTfloatC”&这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:)这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在&#divclass=”floatB”&&#divclass=”NOTfloatC”&之间加上&#divclass=”clear”&这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系
正在加载中，请稍后...css如何在li里让一个元素垂直居中？ - ITeye问答
我有一个li元素，其中的元素都是要垂直居中的。看图：
红框中左侧和右侧的div需要垂直居中，可是在li里，中间的B使行高拉大了，左侧和右侧的div默认就靠底部对其了，现在要使他垂直居中或者靠顶端对其，该怎么办？
基本的html代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&link rel="stylesheet" href="/mobile/1.3.2/jquery.mobile-1.3.2.min.css"&
&title&首页&/title&
&script src="/jquery-1.9.0.min.js"&&/script&
&script src="/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&&/script&
padding:10
width:100%;
height:100%;
border:1px solid #F00;
width:50%;
background:#cce9
display:inline-
width:25%;
background:#
display:inline-
text-align:
text-align:
background:#cce9
text-align:
text-align:
background:#69F;
width:25%;
background:#cce9
display:inline-
text-align:
&div data-role="page" id="page1"&
&div data-role="header"&
&h1&测试左中右结构&/h1&
&div data-role="content"&
&ul data-role="listview" data-inline="false" &
&li style="background:#CFC;border:1px solid #F00;"&
&div class="line"&&div class="left"&A&/div&&div class="middle"&B&/div&&div class="right"&C&/div&&/div&
&li style="background:#CFC;"&
&div class="line"&&div class="left"&我要垂直居中&/div&&div class="middle"&&div class="b0"&B0&/div&&div class="b1"&B1&/div&&div class="b2"&B2&/div&&/div&&div class="right"&我要垂直居中&/div&
问题补充：PS:
不能使用top：-20px；一类的具体的数值使它看上去居中，必须自适应！
如果设置了高度 可以通过line-height来控制垂直居中
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&link rel="stylesheet" href="/mobile/1.3.2/jquery.mobile-1.3.2.min.css"&
&title&首页&/title&
&script src="/jquery-1.9.0.min.js"&&/script&
&script src="/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&&/script&
padding:10
width:100%;
height:54;
border:1px solid #F00;
width:50%;
background:#cce9
display:inline-
line-height:54
width:25%;
background:#
display:inline-
text-align:
text-align:
background:#cce9
text-align:
text-align:
background:#69F;
width:25%;
background:#cce9
display:inline-
text-align:
line-height:54
&div data-role="page" id="page1"&
&div data-role="header"&
&h1&测试左中右结构&/h1&
&div data-role="content"&
&ul data-role="listview" data-inline="false" &
&li style="background:#CFC;"&
&div class="line"&&div class="left"&我要垂直居中&/div&&div class="middle"&&div class="b0"&B0&/div&&div class="b1"&B1&/div&&div class="b2"&B2&/div&&/div&&div class="right"&我要垂直居中&/div&
或者
vertical-align:
display: inline-
但是这样也是需要高度
已解决问题
未解决问题前端在线资源
本文地址：
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的，用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持img外标签的浮动，致使多图片排列时需添加额外标签；需要记住一些比例参数，上手较难；原理艰深，兼容性不稳定等。但是在我看来，这个方法不足够好！本文将提供两种更为新颖的方法，代码简洁，原理简单，上手容易，兼容性强，出错率低的方法。，以及。
css是如此的精深，相信后来人会有更加绝妙的方法。但是，本文提供的几种实现图片垂直居中方法，一定是目前最实用的几种方法。
一、大小不固定，多行文字的垂直居中
① 单行文字
可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：height:3 line-height:3 ……
显示结果如下图：
单行文本垂直居中对齐-鑫空间-鑫生活
② 多行文字
如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？
实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。
核心css代码如下，
外部div标签：
div{display:table- width:550 height:1.14 padding:0 0.1 border:4px solid # color:#069; font-size:10 vertical-align:}
内部span标签：
span{display:inline- font-size:0.1 vertical-align:}
下面这张是实例演示页面的效果截图：
行数不固定文字垂直居中对齐
有几点简要说明：
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" style="background-image:url(/image/study/s/s128/mm1.jpg);" /&
其中此img标签已经设置了高宽和背景居中定位的属性。具体实现可以可以狠狠地进行参照。
② display:table-cell和文字大小控制居中
这个方法可以说就是本文综述部分提到的淘宝团队想出的图片垂直居中的方法。但是本文展示的这个方法的css代码又不是淘宝工程师们的原版代码，我对其做了一定的修改，把里面没有用可以剔除的hack都去掉了。
css代码部分：
img外部div标签：
div {display:table- width:1 height:1 font-size:144 width:144 height:144 font-size:118 border:1px solid # text-align: vertical-align:}/*这里的大小是根据高宽上限128像素图片设置的*/
img{vertical-align:}
需要说明的：
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就可以实现图片的水平垂直居中显示了。
a{display:inline- width:1.2 font-size:128 text-align: vertical-align:}
img{vertical-align:}
就这么简单，就实现了图片的垂直居中效果。下截图为证：
最精简的实现图片水平垂直居中显示的方法
另外补充说明的：img外的标签需是a标签或span这类inline属性的标签，div标签也可以，但是css代码多些: display:inline-*display: 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部分：
&img data-src="/image/study/s/s128/mm1.jpg" /&&img src="../image/pixel.gif" /&
li{height:128 width:150 padding:13px 0; float: margin-right:10 border:1px solid # text-align: font-size:0;}
li .alpha_img{height:100%; width:1 vertical-align:}
li .alpha_img{height:100%; width:0; vertical-align:}
li .show_img{vertical-align:}
其实，只要有上面绿色部分的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- height:100%; width:0; vertical-align:}
相比图片而言，多了个display:inline- 但是会少一次链接请求。效果图和上面的一样的，完美的水平垂直居中。原理也与图片一样，相信很容易理解的。
再提供一下实例页面的链接，狠狠地，实例页面的最后一种方法向您展示了这种新颖的图片垂直居中的方法。
最后，说句实在话，我知道这应该不算什么新颖的方法，在我之前想到这种方法的人肯定不在少数，但是留迹于网上的却没有，我是没有发现过。我不清楚是这些大牛的公司要求技术保密，还是自身不愿分享研究成果。我相信不是这样的，主要还是他们很忙碌，没有时间写这些东西。像我这样，”闲暇”的很，花十几个小时写一篇文章的估计不多，呵呵。
补充于 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: width:150 height:150 text-align: line-height:150 font-size:125}
.zxx_ul_image li img{vertical-align:}
.zxx_ul_image li{float: width:150 height:150 text-align: line-height:150 *font-size:125}
.zxx_ul_image li:after{content:' '; vertical-align:}
.zxx_ul_image li img{vertical-align:}
可以看到，代码非常简洁易懂，HTML部分代码就不上了，您可以单击下面的demo，里面有HTML代码的展示以及效果的预览。
建议您狠狠地单击这里：
原创文章，转载请注明来自[]
本文地址：
（本篇完）
相关文章 (0.512) (0.351) (0.351) (0.318) (0.300) (0.285) (0.281) (0.233) (0.233) (0.214) (RANDOM - 0.185)
标签： , , , , , , , ,
赞助商推荐()：
这里有最全的web前端开发视频
免费大型前端开发公开课
如果你有1~3年前端开发经验，不妨
想找个师兄入门前端？不妨
不知怎么获得高薪？不如
热门总排行}