Question

我正在使用span元素，并会按inline-block显示在一行中。我尝试使用Test 1或Test 2将所有文字Test 5，margin-top ... padding-top设置到每个广场的中间位置，但它没有＆＃ 39;工作。

除此之外，每当广场的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

＆＃13;

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

＆＃13;

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

＆＃13;

将vertical-align:middle;添加到范围。

这是有效的Demo

希望这有帮助。

如何使用＆＃34;内联块＆＃34;中间所有文本用CSS

1 个答案: