下面是一个示例:
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