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

I am trying to vertically align flex items inside a div with bootstrap 5. I have tried multiple methods without any luck. I created a Stack Snippet that replicates my issue exactly. I'm guessing it is something super easy in css I can do to fix it, but I've found nothing that seems to help so far. It always wants to align content on the top half of the 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
      <div >
        <p id="upvote" >
          <i id="upvote_icon"  style="color: gray;"><span id="upvote_badge" ></span></i>
        </p>
        <p id="downvote">
          <i id="downvote_icon"  style="color: gray;"><span id="downvote_badge" ></span></i>
        </p>
      </div>

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

      <div >
        <p  data-bs-toggle="dropdown"><i ></i></p>
        <ul >
          <p id="post_crosspost_modal"  data-bs-toggle="modal" data-bs-target="#siteModal">
            <i > Cross Post</i>
          </p>
          <p id="copytoclipboard" >
            <i > Copy Link</i>
          </p>
          <p id="save_post" >
            <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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

CodePudding user response：

This is not a problem of flex classes in bootstrap. These classes are working properly for your code. You have put the icons inside p tag and p is getting its default margin bottom so the icons are looking aligned to the top. Remove bottom margin of these parent p tags by css or using mb-0 class and then icons will look vertically aligned.