Выровнять текст вертикально по изображению

Question

У меня есть это:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="d-flex mb-3">
    <div class="align-self-center border rounded p-2">
      <img src="https://via.placeholder.com/16" class="float-right m-3">
      Text
    </div>
  </div>
</div>

С изображением справа от текста. Проблема в том, что текст и изображение не выровнены. Как выровнять текст по центру по вертикали, чтобы получился следующий результат:

Answer 1

Кажется, что вы должны опустить float-right на изображении и изменить порядок разметки. Фрагмент:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="d-flex mb-3">
    <div class="align-self-center border rounded p-2">
      Text
      <img src="https://via.placeholder.com/16" class="m-3">
    </div>
  </div>
</div>

Answer 2

.m-3-img { margin: 0.25rem; margin-left: 0.5rem; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="d-flex mb-3">
    <div class="align-self-center border rounded p-2">
      <img src="https://via.placeholder.com/16" class="float-right m-3-img">
      Text
    </div>
  </div>
</div>

Answer 3

Назначьте padding-top:0.7em на span tag

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="d-flex mb-3">
    <div class="row align-self-center border rounded p-2">
		<span style="float:left;padding-top:0.7em">Text</span>
		<img src="https://via.placeholder.com/16" class="m-3"></img>
    </div>
  </div>
</div>