利用vertical-align:middle实现行内元素的水平垂直居中对齐
作者：佚名
字体：[ ] 来源：互联网 时间：04-29 15:48:04
这篇文章主要介绍了利用vertical-align:middle实现行内元素的水平垂直居中对齐，实现样式如下，需要朋友不要错过
最终实现效果为实现行内元素的水平、垂直居中对齐，效果图如下： &接下来为实现代码： 代码如下: &html xmlns="http://www.w3.org/1999/xhtml"& &head& &meta http-equiv="Content-Type" content="text/charset=UTF-8" /& &title& 利用vertical-align实现图片垂直居中对齐 &/title& &style& #content { position: top:0;right:0;bottom:0;left:0; margin: width:500 height:500 background-color: text-align: } .vertical-align-span { display:inline- width:1 height:100%; margin-left:-10 vertical-align: } #content img{ vertical-align: } &/style& &/head& &body& &div id="content"& &span class="vertical-align-span"&&/span& &img src="5.jpg"& &/div& &/body& &/html& 理论基础： 看一下W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。（必须承认这句话我看了很久页没看懂，后来在博客园看了学明兄弟的文章才明白了大概）； 学明兄弟认为它有两种用法： 第一种用法，先看后面一句&在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。&这很容易理解，如果给一个表格的td加一个 vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。 第二种用法，看前页一句&该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。&专业的语言我不会说的，可以打个比喻：假设有两个行内元素a和 b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图： &如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图： &说到这里，思路就清晰了。 同样的原理对文字等也适用。
大家感兴趣的内容
12345678910
最近更新的内容css vertical-align:middle来实现垂直居中-常用代码-Css教程-壹聚教程网css vertical-align:middle来实现垂直居中
文章介绍了关于在css中如何实现垂直居中页面中间了，今天我们来介绍关于divvertical-align:middle来实现垂直居中的方法
&!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&&
&&&& &title&404页面&/title&
&&&& &div class=&wall&&
&&&&&&&& &a href=&index.html&&&img class=&img404& src=&images/404.jpg& alt=&404页面& /&&/a&
&&&& &/div&
代码很简单，就一个class=&wall&的div标签，一个a标签，一个class=&img404&的img标签。
接下来就是写了，先让class=&wall&的div的宽和高都为100%，以填充整个页面，CSS如下：
&style type=&text/css&&
&&&&&&&& body{ margin:0; background:#333; _height:100%;}
&&&&&&&& .wall{ width:100%; height:100%; position: left:0; top:0; text-align:}
&&&&&&&& .img404{ border:0;width:700}
上CSS里面值得一说的恐怕就是为什么要用绝对定位（position:absolute）以及_height:100%这个样式了；我试了很多方法，结果我只能用绝对定位才能让它的height:100%生效，当然固定定位（position:fixed）也是可以的，可是IE6不支持；_height:100%是为了兼容IE6，让class=&wall&的div在IE6里也能高度为100%。如果想验证一下class=&wall&的div现在是否已经填充了整个页面，不妨在.wall里面设一个背景色就可以知道了，这里我就不做实验了。
目前整页的代码如下：
&!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&&
&&&& &title&404页面&/title&
&&&& &style type=&text/css&&
&&&&&&&& body{ margin:0; background:#333; _height:100%;}
&&&&&&&& .wall{ width:100%; height:100%; position: left:0; top:0; text-align:}
&&&&&&&& .img404{ border:0; width:700}
&&&& &div class=&wall&&
&&&&&&&& &a href=&index.html&&&img class=&img404& src=&images/404.jpg& alt=&404页面& /&&/a&
&&&& &/div&
vertical-align:middle来实现垂直居中了，因为class=&wall&的div填充了整个页面，所以只要让图片在class=&wall&的div里面垂直居中就达到目的了。以前总是以为vertical-align与text-align是同样的道理，一个是垂直居中，一个是水平居中，只要给class=&wall&的div加上一个vertical-align:middle就能让图片垂直居中，结果一点效果也没有。事实上vertical-align与text-align完全不一样，给class=&wall&的div加上一个text-align:center的话，毫无疑问是可以让里面的img水平居中，但vertical-align却不能这样子用。
先看一下W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
必须承认这句话我看了很久才看懂说的是神马意思，我的理解是它有两种用法：
第一种用法，先看后面一句&在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。&这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。
第二种用法，看前页一句&该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。&专业的语言我不会说的，可以打个比喻：假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
说到这里，思路就清晰了（PS：理应知道vertical-align可以设middle,top,bottom等等，甚至可以设置具体的值或百分比，如果想知道会有怎样的效果，可以自己实验一下，这里就不多说了。）。
接下来回到这篇文章的主题，现在我要让class=&img404&的img在class=&wall&的div里面垂直居中，我可以在div里面加一个span空标签，把它的高度设为100%，再给它一个vertical-align:middle样式，同样地给img一个vertical-align:middle样式，那么img就可以在div里面垂直居中了。如图：
&!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&&
&&&&& &title&404页面&/title&
&&&&& &style type=&text/css&&
&&&&&&&&& body{ margin:0; background:#333; _height:100%;}
&&&&&&&&& .wall{ width:100%; height:100%; position: left:0; top:0; text-align: font-size:0;}
&&&&&&&&& .img404{ border:0; width:700 vertical-align:}
&&&&&&&&& .verticalAlign{ vertical-align: display:inline- height:100%; width:1 margin-left:-1}
& &/style&
&&&&& &div class=&wall&&
&&&&&&&& &span class=&verticalAlign&&&/span&
&&&&&&&& &a href=&index.html&&&img class=&img404& src=&images/404.jpg& alt=&404页面& /&&/a&
&&&&& &/div&
以上的CSS里面值得一提的是.verticalAlign，加一个display:inline-block是为了触发它的layout，以让本来没有layout的span可以设置宽和高，margin-left:-1px是为了让span左移一个像素，而令img在水平方向上回到正中位置；另外.wall里面的font-size:0正如我上一篇文章所说的是为了消除代码换行所造成的空隙。
最终效果如下：
I'm trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle.
div.categoryLinks {&
& & & & margin: 1em 16&
& & & & padding: 0 4&
& & & & border-width: 1px 0;&
& & & & border-style:&
& & & & border-color: #ece754;&
& & & & background: #f7f5b7;&
& & & & color: #a49f1c;&
& & & & text-align:&
& & & & font-size: 1.4&
div.categoryLinks em {&
& & & & font-size: 0.6&
& & & & font-style:&
& & & & vertical-align:&
&div class=&categoryLinks&&&
& & & & &em&SECTION:&/em&&
& & & & Page One ·&
& & & & Page Two ·&
& & & & &a href=&link&&Page Three&/a&&
Screenshot:
UPDATE: just to be clear, I am aware more-or-less how vertical-align works, i.e. I already know the common misconceptions.
上一页： &&&&&下一页：相关内容}