如何在列表中垂直居中？

Question

<ul>
    <li style="background-color: red"> <div class="test">111 <br /> 111</div></li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
</ul>

.test {
    text-align: center;   
    vertical-align: middle;
}

ul li {
  min-height: 100px;
}

如何在此列表中垂直居中文字？

直播示例： http://jsfiddle.net/yhmsj/4/

Answer 1

为您的行添加行高。

<ul>
    <li style="background-color: red"> <div class="test">111 <br /> 111</div></li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
</ul>

.test {
    text-align: center;   
    vertical-align: middle;
}

ul li {
  min-height: 100px;
  line-height: 100px;
}

Answer 2

这是css

 .test {
        text-align: center;   
        vertical-align: middle;
        padding:50px 0;
    }

    ul li {
        min-height: 100px;
    }