将文本与图像垂直对齐

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>

将文本与图像垂直对齐

Align text vertically with an image

vertical-alignment

bootstrap-4