CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvertical-alignmenttwitter-bootstrap-4
William Entriken
William Entriken

Reputation: 39283

Line up badges of different sizes

I have several badges representing users. Some users have photos (display: block) and others are simply text (display: inline).

enter image description here

For the container we have:

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

And each item is like:

<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>

As is, it seems like this approach is over-engineered and still it is not working.

Please advise how we can correctly align all items vertically.

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

Upvotes: 0

Views: 535

Answers (4)

holden
holden

Reputation: 1779

In the associated stylesheet document:

.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; <-- eliminate this
vertical-align: top; <-- add this
border-radius: .25rem;
}

Upvotes: 0

sol
sol

Reputation: 22949

Add display: flex to the container and then apply align-items property. To vertically align items within each div, 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>

Upvotes: 2

designtocode
designtocode

Reputation: 2245

Add a float: left to .badge

See updated codepen here https://codepen.io/msbodetti/pen/NwKmzw?editors=1100

Upvotes: 1

David Wilkinson
David Wilkinson

Reputation: 5118

I've made use of display: inline-block on the wrappers here to achieve what you're after: https://codepen.io/anon/pen/oovOdN?editors=1100#0.

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

Using inline-block, I can make use of the vertical-align property to vertically centre them all.

Upvotes: 1

Related Questions