将文字与图片垂直对齐

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

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

Answer 3

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