如何设置内容垂直居中?

下面是一个示例:

HTML格式:

<div class="wrapper">
    <ul class="inner">
        <li>c</li>
        <li>c++</li>
        <li>text</li>
        <li>long long long text</li>
        <li>another text</li>
    </ul>
</div>
<div class="wrapper">
    <ul class="inner">
        <li>c++</li>
        <li>text</li>
        <li>another text</li>
        <li>long long long text</li>
        <li>another text</li>
        <li>another text</li>
        <li>another text</li>
        <li>long long long text</li>
        <li>another text</li>
        <li>another text</li>
    </ul>
</div>

CSS:

.wrapper {
    width: 700px;
    height: 200px;
    padding: 0 10px;
    display: table;
    vertical-align: middle;
    background-color: blue;
    margin-bottom: 20px;
}
.inner {
    display: table-cell;
    vertical-align: middle;
}
li {
    float: left;
    color: #000;
    margin: 2px;
    padding: 5px;
    display: inline-block;  
    list-style-type: none;
    border: 1px solid #000;
}

FIDDLE