如何在圖標旁邊放置帶有 h4 標簽的文本？

Question

我目前正在個性化 Hugo 主題https://github.com/themefisher/vex-hugo

可以在此處找到演示： https://themes.gohugo.io/theme/vex-hugo/

在功能下有一些帶有一些文字的漂亮圖標。 我想將標題放在圖標旁邊。

在 html 代碼中，使用循環來放置文本 - 這是在 static 站點生成器 Hugo 的 yml 文件中定義的 - 就像左側圖標和文本：

  <div class="col-md-4">
        {{ range .left_side }}
        <div class="mb-40 text-center text-md-left">
          <i class="d-inlin-block h2 mb-10 {{ .icon }}"></i>
          <h4 class="font-weight-bold mb-2">{{ .title | markdownify }}</h4>
          <p>{{ .content | markdownify }}</p>
        </div>
        {{ end }}

我添加了 style="display: inline;" 到 h4-tag，它將把圖標放在文本旁邊

但是，具有嚴重的副作用，即圖像旁邊的容器中三個圖標文本元素的良好排列（它是中心嗎？）被破壞了。 因此，我必須另謀出路。 此外，我想在圖標和文本之間添加更多空間。

比較第一個（好）和較低（壞）的圖像

Answer 1

您可以在 CSS 中給h4 display: flex; 和align-items: center; . 即使圖標大於文本，它也會垂直居中。

這是代碼示例：

 .bi { font-size: 50px; /* This is only added to show the centering */ } #testOne { font-size: 30px; display: flex; align-items: center; } #testTwo { font-size: 50px; display: flex; align-items: center; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <h4 id="testOne"> <i class="bi bi-alarm"></i> Test </h4> <h4 id="testTwo"> <i class="bi bi-alarm"></i> Test </h4>