bootstrap 5 个 flex box 容器中的内容无论如何都排到顶部

Question

我正在尝试将 div 中的弹性项目与 bootstrap 垂直对齐 5. 我尝试了多种方法，但都没有成功。我创建了一个完全复制我的问题的 Stack Snippet。我猜想这在 css 中是一件非常简单的事情，我可以修复它，但到目前为止我没有发现任何似乎有帮助的东西。它总是希望在 div.

的上半部分对齐内容

.like-and-comment{
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}
.like-and-comment:hover {
    cursor: pointer;
}

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>
  <div>
  The div below has a top and bottom black border. I want the content to center veritcally, but I can not figure out how.  
  </div>
    <div class="like-and-comment">
      <div class="d-flex align-items-center">
        <p id="upvote" class="p-0">
          <i id="upvote_icon" class="fas fa-arrow-up" style="color: gray;"><span id="upvote_badge" class="badge bg-secondary"></span></i>
        </p>
        <p id="downvote">
          <i id="downvote_icon" class="fas fa-arrow-down" style="color: gray;"><span id="downvote_badge" class="badge bg-secondary"></span></i>
        </p>
      </div>

      <p id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal">
        <i class="fas fa-award"></i>
      </p>

      <div class="dropdown">
        <p class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></p>
        <ul class="dropdown-menu">
          <p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal">
            <i class="bi bi-signpost-2"> Cross Post</i>
          </p>
          <p id="copytoclipboard" class="dropdown-item">
            <i class="bi bi-clipboard"> Copy Link</i>
          </p>
          <p id="save_post" class="dropdown-item">
            <i id="save_post_icon"></i>
          </p>
        </ul>
      </div>
    </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

Answer 1

这不是 bootstrap 中 flex classes 的问题。这些 classes 对您的代码正常工作。您已将图标放在 p 标签内，并且 p 获得其默认边距底部，因此图标看起来与顶部对齐。通过 css 或使用 mb-0 class 删除这些父 p 标签的底部边距，然后图标将看起来垂直对齐。

bootstrap 5 个 flex box 容器中的内容无论如何都排到顶部

Content in bootstrap 5 flex box containers lines up to the top no matter what

html

css

flexbox

twitter-bootstrap

bootstrap-5