In Bootstrap 5, the content within flex box containers always aligns at the top, regardless of other factors

I've been struggling to vertically align flex items within a div using bootstrap 5. Despite trying various methods, I haven't had any success. I've even created a Stack Snippet that perfectly reproduces my issue. It seems like a simple CSS fix, but so far, I haven't found any solutions that work - the content always aligns to 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5cbd5c9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8c81819a9d9a9c8f9ec3878d81809daedfc0dbc0de">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f5f8f8e3e4e3e5f6e7d7a2b9a6b9a7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

htmlcsstwitter-bootstrapflexboxbootstrap-5

Answer №1

The issue here is not related to flex classes in bootstrap. The classes are actually functioning correctly for your code. The problem lies in the fact that the icons are placed inside a p tag, which has a default margin bottom applied to it. This is why the icons appear to be aligned towards the top. To fix this, you can either remove the bottom margin of the parent p tags using CSS, or apply the mb-0 class to them. Once you do this, the icons will appear vertically aligned as desired.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for assistance in translating HTML code into an XpathQueryString?

While following a tutorial by raywenderlich on how to parse HTML in Xcode, I encountered an issue. I was able to parse his website successfully, but I'm struggling with the concept of Xpathquery. All I need is to extract the data from a table. Below i ...

htmliosobjective-c

No translation or compiling of SCSS/SASS to CSS available

As a beginner Sass user, I am working on mastering the SMACSS hierarchy and incorporating it into my project using Brackets. However, I have encountered an issue with mapping the main.scss file to the main.css file even though it compiles successfully via ...

csssasscompass-sassadobe-brackets

The usage of line breaks within the <textarea> and <pre> elements is crucial for maintaining the formatting of text

In this box, you can enter text. If you reach the end of the line with letters, it will automatically continue on a new line. Once you click on 'update details,' the letters will be saved in a database. https://i.sstatic.net/q2Y1Z.jpg On the &a ...

html

Inconsistency in width of Bootstrap 4 card layouts

On my webpage, there are three cards displayed as seen in image 1. However, the cards do not have the same width in columns 1. When viewed on mobile (Chrome), the widths are all different and the bottom two cards are touching, as shown in image 2. How can ...

htmlbootstrap-4bootstrap-grid

Can we dynamically adjust font size based on the width of a div using CSS?

My div is set to 70% width and I have a specific goal in mind: To fill that div with text To adjust the font size so that it takes up the entire width of the div https://i.stack.imgur.com/goVuj.png Would it be possible to achieve this using only CSS? B ...

htmlcssfontsresponsive-designfont-size

Can someone explain why my table in Laravel is only showing the third set of data and not the others?

I'm facing an issue with displaying all of the data in my table named taglineImageCarousel. The problem lies in the slide_ID column, where it is being populated with data from slide-01, slide-02, and slide-03. Below is the code snippet: taglineImage ...

phphtmllaravel

Using JQuery to Enhance the Highlight Effect: Tips and Tricks

Exploring the functionality of the "highlight" JQuery effect: http://docs.jquery.com/UI/Effects/Highlight You have the ability to modify the background color of any DIV element with a fade in/out effect. However, the provided example demonstrates trigge ...

javascriptjqueryhtmljquery-ui

Stop the scrolling behavior from passing from one element to the window

I am facing an issue with a modal box window that contains an iframe. Inside the iframe, there is a scrollable div element. Whenever I try to scroll the inner div of the iframe and it reaches either the top or bottom limit, the browser window itself start ...

javascriptjqueryhtmleventsscroll

Deactivate the linear x axis labels in jQChart

I have a jQchart Linear chart that is displaying correctly and functioning properly. I am looking to remove or disable the X axis labels from the chart. ...

phpjavascriptjqueryhtmljqchart

Troubleshooting CSS Code Issues on Myspace

Greetings! I am currently working on enhancing a friend's profile on myspace.com. I have two divs on each side of the screen that I want to align next to each other. I have tried using float: left; and float: right;, as well as experimenting with marg ...

cssmyspace

Sending JSON data from the primary window to the secondary window in Electron - A step-by-step guide

I am currently working with a set of 3 files. index.html: ... <a href="#" onclick="fetch(function(data) {console.log(data); subWindow(data)})">subWindow</a> ... The fetch() function retrieves a callback in JSON format. subWindows.js: let m ...

javascripthtmlnode.jsjsonelectron

The visible overflow-x property is failing to display the excess content within the unordered list

Imagine having a complex bootstrap dropdown menu with over 100 li items. Each time you hover over an li, a new dropdown opens next to it. The problem arises when trying to make the list scrollable by setting max-height:300px; overflow-y:scroll; overflow-x ...

htmlcsstwitter-bootstrap

Issue with Flask form submission in a specific scenario but functioning correctly in a different context

I'm currently working on a flask website, and I'm facing an issue with the SubmitField not functioning when I click it. I tried a similar method with a smaller form and it worked, but for this specific case, it's not working. routes.py from ...

pythonhtmlflaskbootstrap-4jinja2

Issues with displaying ngAnimate animations

For the past 10 hours, I've been attempting to get my animations to function properly. It seems that they only work when I include the animate.css stylesheet and use the "animated classname". However, when I try to create custom entrance and exit anim ...

javascriptcssangularjsng-animate

The `required` attribute is ineffective when used with the `<form>` element

My required attribute isn't enforcing mandatory field completion before form submission. HTML Code: <!-- Modal Content --> <form class="modal-content2"> <div class="container3"> < ...

javascripthtmlcssajaxrequired

Issue with jQuery draggable appendTo functionality not functioning as expected

Below is the code snippet: JavaScript jQuery $('.dragBox').draggable({ axis: 'y', appendTo: 'parent', containment: [0,0,0,150], start: function() { $(this).addClass('grab ...

jqueryhtmlcssdraggable

In Redux, it is possible to add characters to an array but for some reason the remove action does not successfully reach the reducer

As a user types or erases characters, I am utilizing redux to update an array of characters. This allows me to set a success flag when the user correctly types the entire phrase. Currently, when typing in characters, the SET_INPUT action in redux fires of ...

javascripthtmlreactjsredux

Is there a way to get rid of this strange border surrounding my element?

Something strange is happening with the styling of my button. There seems to be an outline around it that I can't explain. Can anyone help me understand why this is happening? button { padding: 1em; background: transparent; border: none; } ...

htmlcss

Ensure that the innerHTML of the span tag does not contain line breaks

Is there a way to prevent the span tag inside the div with the item class innerHTML from causing a line break, regardless of its length? I also need to ensure that any innerHTML exceeding the item width does not overlap but is hidden. I have attempted usin ...

csswidthlinebreak

What is the best way to center a menu for a cohesive and balanced appearance?

I am encountering an issue with my design. I am attempting to center-align a menu, but I want it to appear uniform and consistent. I want it to resemble the layout shown in the image link below. https://i.sstatic.net/D3Rep.png I cannot understand why my ...

htmlcssbootstrap-5