css - 将跨度文本与 .btn 对齐

Question

我正在使用下面的 .card 并在一段时间内获得文本“你喜欢这个”。与 hr 元素下方的 Like 和 Comment .btn-links 一致。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
    <div class="card-body">
      <hr>
      <div>
        <button class="btn btn-link">Like</button>
        <span class="text-muted" style="">You liked this.</span>
        <button class="btn btn-link float-right">3  Comments</button>
      </div>
  </div>
</div>

我已经尝试了所有我能想到的。更改显示属性。使用边距或填充。调整字体高度。这些都没有用。我不确定如何让它对齐，我们将不胜感激。

我可能可以使用 float 甚至 flexbox 来让它工作，但这似乎太过分了，如果可能的话我宁愿不要这样做。谢谢。

Answer 1

你错过了垂直对齐，在你的 span 上使用 Bootstrap 类 align-middle。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
    <div class="card-body">
      <hr>
      <div>
        <button class="btn btn-link">Like</button>
        <span class="text-muted align-middle">You liked this.</span>
        <button class="btn btn-link float-right">3  Comments</button>
      </div>
  </div>
</div>