將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

你可以包裝標簽在一個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
}