css - 如何设置内容垂直居中？

Question

我创建了一个宽度为 700 像素、高度为 200 像素的 div。在这个 div 中，一些标签将动态加载最多 2 行。如果标签在 2 行中，则对齐看起来很好，但对于 1 行，底部显示很多空格。我需要将此标签垂直居中加载。

Answer 1

这是一个例子:

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