如何使用 CSS "inline-block"对所有文本进行中间化

Question

我正在使用span元素，并且会按inline-block显示在一行中。我试图使所有文本Test 1，Test 2...Test 5到每个正方形的中间，有margin-top或padding-top，但它不起作用。

除此之外，每当正方形的height发生变化时，文本仍然停留在其正方形的中间。请让我知道该怎么做。

小提琴链接：http://jsfiddle.net/xVnQ6/150/

.HTML：

<div id="legend">
<span class="legendTest1"></span><span class="legendText">Test 1</span>
<span class="legendTest2"></span><span class="legendText">Test 2</span>
<span class="legendTest3"></span><span class="legendText">Test 3</span>
<span class="legendTest4"></span><span class="legendText">Test 4</span>
<span class="legendTest5"></span><span class="legendText">Test 5</span>
</div>

.CSS：

.legendTest1 {
background-color: #DCDEE0;
}
.legendTest2 {
background-color: #FF4739;
}
.legendTest3 {
background-color: #FFCA4C;
}
.legendTest4 {
background-color: #00AEEF;
}
.legendTest5 {
background-color: #27AF8F;
}
#legend {
float: left;
margin-top: 20px;
}
#legend span {
display: inline-block;
}
#legend .legendText {
margin-left: 5px;
}
.legendTest1,
.legendTest2,
.legendTest3,
.legendTest4,
.legendTest5 {
width: 80px;
height: 80px;
margin: 0 0 0 10px;
}

Answer 1

.legendTest1 {
background-color: #DCDEE0;
}
.legendTest2 {
background-color: #FF4739;
}
.legendTest3 {
background-color: #FFCA4C;
}
.legendTest4 {
background-color: #00AEEF;
}
.legendTest5 {
background-color: #27AF8F;
}
#legend {
float: left;
margin-top: 20px;
}
#legend span {
display: inline-block;
vertical-align:middle;
}
#legend .legendText {
margin-left: 5px;
}
.legendTest1,
.legendTest2,
.legendTest3,
.legendTest4,
.legendTest5 {
width: 80px;
height: 80px;
margin: 0 0 0 10px;
}

<div id="legend">
<span class="legendTest1"></span><span class="legendText">Test 1</span>
<span class="legendTest2"></span><span class="legendText">Test 2</span>
<span class="legendTest3"></span><span class="legendText">Test 3</span>
<span class="legendTest4"></span><span class="legendText">Test 4</span>
<span class="legendTest5"></span><span class="legendText">Test 5</span>
</div>

将vertical-align:middle;添加到您的跨度。

这是工作演示

希望这有帮助。