Question

我正在尝试使用CSS来对齐一些常规文本旁边的盒装文本，并使用标签创建盒装文本。如果框中有文本，则它与常规文本居中对齐，但如果框为空，则它是底部对齐的。有没有办法始终保持框与文本中心对齐？

<div id="click-wrap">
  <button>Click me, nr 1</button>
  <button>Click me, nr 2</button>
  <button>Click me, nr 3</button>
</div>

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

请参阅以下JSBin以了解我的问题：JSbin

Answer 1

使用vertical-align:middle属性

＆＃13;

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

＆＃13;

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

＆＃13;

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
}

将CSS框居中，旁边有文字

2 个答案: