how centered vertically text in list?

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

how centered vertically text in this list?

LIVE EXAMPLE: http://jsfiddle.net/yhmsj/4/

Answer 1

Add a line-height for your line.

<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

Here is css

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

    ul li {
        min-height: 100px;
    }