该处用了一个<b>标签的样式来控制了整个父级的垂直居中效果。
复制以下代码到本地，另存为html 运行查看效果：
<!DOCTYPE html> <html> <head> <meta meta="" charset="utf-8" /> <title>Demo</title> <style type="text/css" media="all"> body{color:black;background-color:white;padding:50px;font-size: 12px;line-height:16px;font-family:arial; color: #1E346E;} * {margin: 0;padding:0;border-width: 0;} .list{vertical-align: middle;width:640px;margin-bottom: 1px;border: solid 1px #00a0da;background-color:#F0F5FF; } .list:hover{background-color:#d9e7f5;} .list p,.list b { vertical-align: middle;display: -moz-inline-stack;display:inline-block;zoom:1;*display:inline;} .list p { padding:10px;} .list b { height:52px;width:1px;overflow:hidden;margin-left:-1px;background-color:#009Cd0;} </style> </head> <body> <div class="list"> <b> </b> <p style="80px;">first class</p> <p style="160px;">Can be modified</p> <p style="160px;">Can be refunded.</p> <p style="160px;">Can be endorsed</p> </div> <div class="list"> <b> </b> <p style=" 80px;">Economy class</p> <p style="160px;">Can be modified</p> <p style="160px;">Can be refunded.</p> <p style="160px;">Can be endorsed</p> </div> <div class="list"> <b> </b> <p style="80px;">23% off Economy class</p> <p style="160px;">One free change permitted within same class if available; further changes charged 10% of fare. Passengers must go to CA ticketing office to process fee-based changes.</p> <p style="160px;">10% of fare charged. </p> <p style="160px;">Can not be endorsed</p> </div> <div class="list"> <b> </b> <p style="80px;">-6% off Economy class</p> <p style="160px;">Free change permitted within same class if available at least 4 days prior to departure.</p> <p style="160px;">20% of fare charged (minimum CNY50 charge).</p> <p style="160px;">Can not be endorsed</p> </div> </body> </html>
方法总结：
之前做了一个图片垂直居中的案例，现在将它用到文本里面也可以的。
<div class="image"> <a href="#"> <i></i> <img src="images/sku154288-11.jpg"> </a> </div>
看CSS部分：
.imges{ height:270px; } .image i { display: inline-block; height: 100%; vertical-align: middle; } .image img{ vertical-align: middle; }
上面的例子是图片的，那多行文本呢？
HTML结构：
<li><i></i><span>Wear and keep accessories</span></li>
多行文字垂直居中的方法是在父级里面建一个<i>或者<b>等元素，样式定义
li i {display:inline-block; height:100%; vertical-align: middle;}
然后用一个span 或者其他标签把文字包起来，样式定义
li span{display:inline-block; vertical-align: middle;}