将文本与图标的高度对齐

Question

我用bootstrap5

我希望文本与图标高度垂直对齐，而不是让文本位于图标下方

h3 {
  text-align: center;
}

.testHead {
  background-color: #5c636a;
  color: white;
  text-align: center;
}

.testHead .col {
  font-size: 1.2rem!important;
}

.testHead i {
  font-size: 4rem!important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<nav class="testHead">
  <h3>For a few dollar</h3>
  <br>
  <div class="row">
    <div class="col ">
      <i class="bi bi-display"></i> Answer simple question

    </div>
    <div class="col">
      <i class="bi bi-download"></i> Download and print
    </div>
    <div class="col">
      <i class="bi bi-clock"></i> It take less then 10 minutes
    </div>
  </div>
</nav>

搜索得到类似的东西

Answer 1

使元素灵活，这是最简单的解决方案。将这些 Bootstrap 类添加到需要像这样垂直居中的元素中：

 <nav class="testHead">
  <h3>For a few dollar</h3>
  <br />
  <div class="row">
    <div class="col d-flex align-items-center">
      <i class="bi bi-display"></i>
      Answer simple question
    </div>
    <div class="col d-flex align-items-center">
      <i class="bi bi-download"></i>
      Download and print
    </div>
    <div class="col d-flex align-items-center">
      <i class="bi bi-clock"></i>
      It take less then 10 minutes
    </div>
  </div>
</nav>

Answer 2

或简单的 CSS.

用 p 标签包围你的文本，用类名给 margin-letf

例如：

  <div class="col d-flex align-items-center">
      <i class="bi bi-display"></i>
      <p class="descr">Answer simple question</p>
   </div>

然后将 css 应用到您的 <div class="col"> :

.col {
  display:flex;
  align-items:center;
}

.col .descr {
  margin-left: 10px
}

将文本与图标的高度对齐

Align tex with heigh of icon

css

twitter-bootstrap