Выровнять текст диапазона с .btn

Question

Я работаю с .card ниже и у меня есть время, когда я получаю текст «Тебе понравилось». в соответствии с Like и комментарием .btn-links под элементом hr.

<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

Вы пропустили вертикальное выравнивание, используйте класс начальной загрузки 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>

Answer 2

Вы можете использовать этот код

        body {
            margin: 0;
            padding: 0;
        }
        .btn-link {
            font-weight: 400;
            color: #007bff;
            text-decoration: none;
            margin-top: -4px;
        }

    <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>