Excessive top margin on a div within a flex container is disrupting alignment

I am currently using Bootstrap 5 with flex. I am trying to align an image with some content on its right side, but when I try to align them vertically, the content on the right does not move accordingly. It seems like there might be a margin issue in the "bob" div, however, it doesn't appear in the inspect tool. Adding mt-0 also doesn't seem to solve the problem. I have exhausted all my ideas at this point. Below is a code snippet that demonstrates the issue.

.profile-name{
    display: flex;
    align-items: center;
}

.profile_image{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.location-time{
    font-size: 12px;
    line-height: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}
<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="9bf9f4f4efe8efe9faebdbaeb5abb5a9">[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="05676a6a717671776475286c666a6b7645342b302b35">[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>
I would like the image on the left to align vertically with the div "bob" and "5 hrs ago". Strangely, there seems to be a large space above where it says "bob".
  </div>

<div class="profile-name">
  <img src="https://blog.gordonturner.com/wp-content/uploads/2020/06/dashboard-dual-screen.jpg" class="profile_image" />
  <div>
    <div id="post_top">bob </div>
    <div id="post_top2" class="location-time">5 hrs ago</div>
  </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="92f0fdfde6e1e6e0f3e2d2a7bca3bca2">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

htmlcsstwitter-bootstrapflexboxbootstrap-5

Answer №1

To fix the issue, you can add a margin bottom to the location-time div using margin-bottom: 10px;. The main reason for this problem is the line-height: 1px property. However, if you remove this line without adding the margin-bottom, you can still achieve the desired result

.profile-name{
    display: flex;
    align-items: center;
}

.profile_image{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.location-time{
    font-size: 12px;
    line-height: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}
<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="abc9c4c4dfd8dfd9cadbeb9e859b8599">[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="ef8d80809b9c9b9d8e9fc2868c80819cafdec1dac1df">[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>
I need the image on the left to be vertically aligned with both the "bob" and "5 hrs ago" text in the "location-time" div. Currently, there is extra space above the "bob" text that needs to be corrected.
  </div>

<div class="profile-name">
  <img src="https://blog.gordonturner.com/wp-content/uploads/2020/06/dashboard-dual-screen.jpg" class="profile_image" />
  <div>
    <div id="post_top">bob </div>
    <div id="post_top2" class="location-time">5 hrs ago</div>
  </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="caa8a5a5beb9beb8abba8affe4fbe4fa">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

Answer №2

If you want to achieve a similar effect, consider following these steps:

html:

 <div class="hero-and-title">
     <div id="main_hero">hero </div>
     <div id="sub_hero" class="description-time">2 days ago</div>
 </div>

css:

 .title-description{
     display: flex;
     align-items: center;
     position: relative;
 }
 .hero-and-title{
     position: absolute;
     top: -2px;
     left: 45px;
 }

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

How can you transfer a function to another function within the render return statement?

I am encountering an issue when attempting to pass a function to another function. The initial function successfully downloads JSON data and returns it. However, the subsequent function, which is meant to convert the JSON data to HTML code, is not functio ...

javascripthtmlreactjsnext.js

Positioning SVGs within a parent container while maintaining responsiveness

How can I anchor an SVG overlay with a circle in the bottom right corner while expanding the rest of the SVG to fill the remaining area of the container without distorting the circle? I've been able to position the SVG in the bottom right corner, but ...

htmlcsssvgresponsive

The top navbar does not stay fixed when the page is scrolled

Having some trouble with my navbar. Here is the code I'm using: <nav id="strumenti" class="navbar navbar-expand-sm navbar-light bg-light sticky"> <a class="navbar-brand" href="#"> <img src="C:\Users\Fabry\De ...

csshtmlbootstrap-4navbar

Creating a dynamic multi-select feature in AngularJS with ng-repeat

I'm relatively new to AngularJS and JavaScript, but I've managed to create a functional multi-select list. The ng-model linked to the dropdown is part of a "user" DTO object, specifically a property that stores an array of "groups" the user can j ...

javascripthtmlangularjsangularjs-ng-repeat

Retrieve the innerHTML contents from all span elements

I'm having trouble getting the content of all span tags that are child elements of div#parent. So far, I've only been able to retrieve the content of the first one. Can someone please assist me with this? $( document ).ready(function() { ...

javascriptjqueryhtml

What are the steps to remove text within a list item using jQuery or regular JavaScript in a WordPress theme?

I need to remove the word "previous" from an li element in a wordpress theme. the text to delete <ul class="flex-direction-nav"> <li class="flex-nav-prev"> <a class="flex-prev" href="#">Previous ...

javascripthtmljquerywordpresshtml-lists

My objective is to use JavaScript to dynamically update information in an HTML document using data retrieved from a JSON file

Experience the benefits of our membership program: PROGRAMMING var benefitsData = document.getElementById("memberBenefits"); for (var i = 0; i < membershipData.benefits.length; i++){ benefitsData[i].getElementsByTagName('h4')[0].innerHTML = ...

javascripthtmljson

Is there a way to stylize the initial words of a brief text block by blending small caps with italics, all while avoiding the use of a span tag?

I have a series of images with numbered captions like "Fig. 1", "Fig. 2", "Fig. 3", followed by a brief description on the same line. Is there a way to programmatically style these strings (the “Fig. #” only) using CSS or Javascript to make them italic ...

javascripthtmlcss

Bulk uploading HTML and CSS files to Squarespace made simple

Hello amazing people of the Stack Overflow community, I'm still learning the ropes around here (so please go easy on me) and I have a question about uploading HTML/CSS + Packages in bulk to my website. I have some experience with the code injection/ ...

htmlcsssquarespace

"Utilize CSS Flexbox to create a layout with set width and uniform

Within a container, I have organized three sections. As I adjust the size of my browser to a maximum width of 668px, I want section 1 and section 3 to be displayed in one row while section 2 is placed below them. The width of section 2 should be proportion ...

htmlcssflexbox

The media query designed for iPads with a minimum width will also be effective for Android devices

As I delve into the realm of editing CSS created by others, I come across a peculiar situation involving media queries specifically designed for iPads. While one query is intended for portrait orientation and another for landscape, they are causing havoc o ...

androidcssipadmedia-queriesdevice-width

Strange behavior observed in Bootstrap navbar-brand class logo

As I work on creating a responsive HTML page using Bootstrap CSS, my focus is on the navbar-brand class that contains a logo element. Here's the code snippet in question: <div class="grad"> <a class="navbar-brand" id="navbar-logo" hre ...

htmlcsstwitter-bootstrapresponsive-design

Hovering over the Star Rating component will cause all previous stars to be filled

I'm in the process of creating a Star Rating component for our website using Angular 11. I've managed to render the 5 stars based on the current rating value, but I'm having trouble getting the hover styling just right. Basically, if I have ...

htmlcssangular

What is the best method for transforming this table design into a div structure?

After being told by a friend to try using the div layout, I've been struggling to make it work for my needs. My goal is to achieve the layout shown in the diagram below: +-----------------------------------------+ | Fixed Height = 50 ...

htmlcss

How Can You Create a Sliding List Animation (Up/Down) Using Angular and Twitter-Bootstrap?

Hey, can you give me a hand with this? :) I'm attempting to create a sleek sliding up and down list in Angular, but I'm struggling to make it work. My CSS skills are not very advanced, so I'm still learning and gave it my best shot: http:// ...

javascriptcssangularjstwitter-bootstrapcss-animations

Distorted image display on Bootstrap card in Internet Explorer

My layout includes bootstrap v4 cards, but I'm having issues with distorted images in Internet Explorer 11. It seems that IE is not recognizing the height: auto attribute from the img-fluid class. Should I set a custom height for the card images? Inte ...

csstwitter-bootstrapinternet-explorer-11bootstrap-4twitter-bootstrap-4

Arrange the div next to each other

Looking to position two divs side by side with widths totaling 100%? The left div will have a specified width in pixels that can change, while the right div should expand to fill the remaining space. Having trouble with this layout? Check out my example o ...

htmlcssposition

Tips for aligning text at the bottom of a div that has been floated to the right alongside another div

I have a parent container with two child divs inside; one div is floated to the left and the other is floated to the right. Here is my current layout: ┌─────────────┬─────────────┐ │ Text left ...

htmlcss

Using ngModel to retrieve and display only the month, year, and date

Currently, I am working with an interface named Person which includes fields such as name, last name, birthday, and others. However, I am facing a confusion when it comes to the person's birthday format, as it contains some additional letters at the e ...

javascripthtmlangulartypescript

Creating a Jquery method to handle multi-line ellipsis for long text

Check out this fiddle I made: http://jsfiddle.net/mupersan82/JYuSY/ This snippet handles multiline ellipsis: $(function() { var ellipsisText = $('.multilineEllipseText'); var textContainer = $('.incidentCellBottomRight').height(); whi ...

jqueryhtmlcss