但是上面的代码可读性太差，也不美观，一般这样写
<ul>
<li class="box"></li><!-- 注释去空格
--><li class="box"></li>
<li class="box"></li>
</ul>我们用一个注释节点代替空白（文本节点），而注释节点渲染的时候是不渲染的。了解更多DOM中的节点类型，可看我的另一篇文章《DOM》。
七、vertical-align:middle让元素下移而不居中的问题分析
1、问题
现在有三个inline-box块，高度分别为100px，200px，300px，想让高度为100px的块垂直居中，于是写出了如下代码：
<style type="text/css">
.ctn-block{
background-color: #bbb;
}
.ctn-block .child {
display: inline-block;
width: 100px;
background-color: aliceblue;
}
.ctn-block .child-1 {
height: 100px;
/* vertical-align: middle;*/
}
.ctn-block .child-2 {
height: 200px;
}
.ctn-block .child-3 {
height: 300px;
}
</style>
<div class="ctn-block">
<div class="child child-1"></div>
<div class="child child-2"></div>
<div class="child child-3"></div>
</div>
给中间div加上vertical-align:middle，效果变为上图二的样子——child-1元素下移了，但是却没有居中。
2、原因
从上面可以指定，vertical-align:middle的定位方式是：将子元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐。
子元素盒子的中点很好算，而父盒子的baseline加上父盒子的x-height一半位置又是什么呢？
首先计算父盒子的baseline：三个子元素的baseline走在一条直线上，就是child-2和child-3的底部。
然后加上父盒子的x-height：由于chrome下默认font-size是16px，而font-family:sans-serif，所以x-height的一半大概是3-4px，综上，按照如下方式对齐：
3、 解决方案
一种方式是将最高的元素设为vertical-align:middle。
然后将想要居中的也设定为vertical-align:middle，其他的根据需要设定vertical-align:top/bottom。
原理有点抽象：
首先明确一点：最高元素设定为vertical-align:middle后，这个元素对于line box来说，baseline就是其中线。
其他元素设置vertical-align:top/bottom后，它们不影响line box的baseline，所以再将需要设定垂直居中的元素也设定为vertical-align:middle，它们的baseline必然在最高元素的baseline之上，所以会会被强制下移，进行居中。
