列表中文本如何垂直居中？

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;
    }