Arrange the assortment of varying sized badges in a straight line

I have a variety of badges representing users. Some users have images displayed as blocks while others are represented by text inline.

https://i.sstatic.net/BtDgo.png

Within the container, we have the following structure:

<div class="align-self-center">

Each individual item looks like this:

<div style="height:30px" class="pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger">
  <span class="p-1">PMT</span>
  <span class="align-self-center">46h </span>
</div>

It appears that the current approach may be overly complex and is not producing the desired results.

I would appreciate guidance on how to properly align all items vertically.

CODEPEN: https://codepen.io/anon/pen/EbYJyd?editors=1100#0

htmlcsstwitter-bootstrapvertical-alignmenttwitter-bootstrap-4

Answer №1

To achieve vertical alignment of items within each div, apply the display: flex property to the container and then use the align-items property. Simply repeat the rule for the div.

.profiles,
.profiles div {
  display: flex;
  align-items: center;
}
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>

<body>
  <div class="profiles">
    <div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><span class="p-1">PMT</span><span>46h </span></div>
    <div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><img height="30" title="debbcarol not online on Slack" class="rounded translucent" src="https://avatars.slack-edge.com/2017-06-01/191787258759_1f147d9c455250f2399c_72.jpg"> <span>8d </span></div>
    <div style="height:30px" class="pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><span class="p-1">David</span><span>8d </span></div>
    <div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><img height="30" title="robgarza" class="rounded" src="https://avatars.slack-edge.com/2016-11-05/100970331412_61a091a494a137be0188_72.png"> <span>3d </span></div>
    <div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><img height="30" title="alinan523" class="rounded" src="https://avatars.slack-edge.com/2017-07-11/211053436291_0695a1cedc52065260b5_72.png"> <span>28d </span></div>
    <div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><img height="30" title="will not online on Slack" class="rounded translucent" src="https://avatars.slack-edge.com/2016-10-20/93977971973_091d34c1388d122e488e_72.jpg"> <span>21d </span></div>
  </div>
</body>

</html>

Answer №2

To achieve the desired layout, I utilized the display: inline-block property on the container elements. Check out the results here: https://codepen.io/anon/pen/oovOdN?editors=1100#0.

div.pl-0 {
    display: inline-block;
    vertical-align: middle;
}

Using the inline-block property allows me to easily center the elements vertically by using the vertical-align property.

Answer №4

When looking at the stylesheet, you can make the following changes:

.badge {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline; <-- remove
vertical-align: top; <-- insert
border-radius: .25rem;
}

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

Link embedded in prism formatting, encased in code snippet

In the HTML template, I have the following code snippet: <pre> <code class="language-markup"> {% filter force_escape %} <Item> <MarkUp><a href="http://google.com">Google</a></MarkUp> <No ...

javascripthtmlprism.js

When resizing the window, divs shift positions and prevent the use of the horizontal scrollbar

I'm encountering an issue with my website layout. Specifically, I have a full-width navbar with some divs nested within it. However, when the page is resized, the position of these divs in the navbar shifts and a scrollbar appears at the bottom of the ...

csshtmlscrollbaroverflow

What is the reason behind needing to set both top/bottom and left/right to 0 so that my body::before can effectively cover the entire page?

I am currently diving into the world of front-end web development and I am having some trouble grasping the concept behind the behavior of body::before. Below is a snippet of my CSS code: body::before { content: ""; position: fixed; width: ...

css

How can white space be maintained using <select> and <V-for> in Vue.js?

Using select and v-for to display values can be tricky when dealing with white space, such as "a a - ". Sadly, most of the white space gets removed when the values are shown and returned to the backend. Here is the code snippet illustrating the i ...

htmlvuejs2

Link Tag and the Download Functionality in HTML

I'm looking for a way to deactivate the "download" attribute in an anchor tag, like download="false": <a href="https://cdn1.iconfinder.com/data/icons/HTML5/512/HTML_Logo.png" download></a> In my AngularJS application, I want all image fi ...

jsonhtmlangularjs

What is the best method for retrieving text from elements designated by class?

I am currently using BeautifulSoup to scrape data from a website, but I am facing an issue with extracting only the text I need. The specific part of the website data that I want to grab is: <div content-43 class="item-name">This is the te ...

pythonhtmlweb-scrapingbeautifulsoup

Liquid 960: Bizarre Alpha/Omega Phenomenon

Currently, I am working with Fluid 960 and encountering some unexpected behavior with alpha/omega. Typically, I utilize alpha/omega to adjust left and right margins within nested grids. Oddly enough, when I use alpha/omega on a set of nested grids, the gr ...

css960.gsfluid-layout

EaseSlide 'Basic Slideshow' created by Ameenullah Fails to Function

I'm trying to embed a carousel into my webpage. I copied the code from Bootsnips but have been unable to solve this issue with other solutions. This is my HTML Code: <div class="container"> <div class="row> <div class="col ...

jqueryhtmltwitter-bootstrapcarousel

What is causing the breakdown of bordered tables in Bootstrap when the border-separate property is set to collapse?

I am experiencing an issue with my bordered table that is using the Bootstrap classes table table-bordered. When I add border-collapse: separate, the borders are correctly separated, but the top and bottom borders seem to disappear due to zero width. I am ...

csstwitter-bootstrapbootstrap-5

Using PHP's header function to alter directories

So I am currently diving into PHP and facing a challenge with using headers. My setup involves using xampp for development purposes. I have a basic form where users can log in on "index.php". Upon successful login, the header function kicks in to redirect ...

phphtmlcss

Can this be achieved using CSS alone, without needing JavaScript?

In this scenario, there is a div with the class of some-class that can have either one or two child div elements. When there is only one child div, I want it to have a width of 100%. However, if there are two child div elements present, I want them to have ...

htmlcss

Excessive padding observed on the right side of the screen when viewed on mobile devices

I am having an issue with my portfolio site where there is a white space on the right side in the mobile view, but only in Chrome. The desktop and Mozilla mobile views are fine. I have attached a screenshot highlighting the problem. Here is the link: Chrom ...

htmlcssbootstrap-4responsive-design

Challenges with Implementing Background Images on my Website with HTML and CSS

Being new to the world of coding, I recently created a website for a college presentation. However, after uploading the website onto the internet, I noticed that the background images from my files are not displaying on the website. It's likely that I ...

htmlcss

What could be the reason for the lack of definition of the `pieceOfText

My latest project involves a fun guessing game centered around decrypting text, but I've hit a snag with a variable in my JavaScript code. This variable, known as pieceOfText, should be assigned a random piece of text from an array containing 3 encode ...

javascripthtmldebugging

The correct way to reference images in the resources folder using a URL in CSS

After I generated a Maven dynamic web project using an archetype, I decided to organize the javascript, css, and image folders under the webapp folder. The structure now looks like this: myproject | main | | | java | | | resources | | ...

cssmaven

ways to utilize inline styling in react using javascript

When repurposing an array of React components, I am looking to modify the inline styles generated with them. How can I access and log the inline styles of a React component? UPDATE: see the code snippet below: const pieces = this.props.pieces.map((decl, ...

javascripthtmlcssreactjs

Tips for adjusting the color using inline CSS

Currently, I have a div styled with blue color using CSS. However, I now require the ability to dynamically change this color. My plan is to retrieve the desired color from a database and use its hexadecimal code in place of the default blue. What is the ...

htmlcss

Unraveling a collection of HTML tags using Python's Beautiful Soup library

Need help parsing HTML code using Python Beautiful Soup. Trying to extract images along with their width and height properties, if available. The following code snippet indicates there are three images on a page: the first image is 300x300, the second has ...

pythonhtmlbeautifulsoup

Programming in Python often involves utilizing a combination of powerful libraries such as BeautifulSoup,

I am currently developing a program that is designed to extract emails and collect specific links from them, particularly those from Newegg. I have successfully used iMAP to log in and access the HTML content of the emails. However, I am encountering an is ...

pythonhtmlbeautifulsouppython-requestsimap

Commitment of service within AngularJS controller using the "as" syntax

I'm experiencing an issue with the code snippet below. I prefer using the controller as syntax and assigning data to 'this' instead of $scope. The problem is that in this scenario, when using $scope.user everything works fine, but when tryin ...

javascripthtmlangularjs