居中一个CSS框，旁边有文本

Question

我试图使用CSS对齐常规文本旁边的方框文本，并使用标记创建盒式文本。如果该框包含文本，则它与常规文本对齐，但如果该框为空，则为底部对齐。是否有一种方法可以使盒子与文字保持中心对齐？

​

#round,
#score {
  display: inline-block;
  border: thin solid dimgray;
  width: 50px;
  height: 15px;
  text-align: right;
  line-height: 15px;
  padding: 5px;
}

Round # <a id=round></a> Your Score <a id=score>12345</a>

​

请参阅以下JSBin以说明我的问题：JSbin

Answer 1

使用vertical-align:middle属性

​

#round,
#score {
  display: inline-block;
  border: thin solid dimgray;
  width: 50px;
  height: 15px;
  text-align: right;
  line-height: 15px;
  padding: 5px;
  vertical-align: middle
}

Round # <a id=round></a> Your Score <a id=score>12345</a>

​

Answer 2

您可以将a标记包装在div中，如下所示：

<div class="vcenter">
    Round # <a id=round></a> Your Score  <a id=score>12345</a>
  </div>

并应用这个css

#round, #score {
  display: inline-block;
  border: thin solid dimgray;
  width: 50px;
  height: 15px;
  text-align: right;
  line-height: 15px;
  padding: 5px;
}

.vcenter{
  display: flex;
  align-items:center
}