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 
} 

を適用します