How to vertically align a badge next to a multiline heading element's last line?

Question

How can I vertically align a badge (which is smaller) vertically next to the h1 tag. I don't want to put the span tag into the h1 tag for SEO reasons.

Right now it is aligned at the bottom. I want to have it in the middle.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:350px;">
  <h1 class="d-inline">This is a Test This is a Test</h1>
  <span class="badge badge-secondary ml-2">My Badge</span>
</div>

Expected result:

What do you want it to look like if the h1 goes over several lines? — A Haworth, Jun 20 '22 at 14:50
What is the problem with using transform: translate(-50%) as that adjusts to whatever the height of the span is - though if you had descenders in the h1 it may look a little high). — A Haworth, Jun 20 '22 at 15:11
I don't understand why it is a duplicate. The link to the "duplicate" shows a different html structure. As I pointed this out in my question => I don't want to have the span tag in my h1 tag. — Philipp S., Jun 20 '22 at 15:34

Joe Czucha · Accepted Answer · 2022-06-28T10:38:18.510

You can make the parent flexbox and then align-items: center;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div style="width:350px;" class="d-flex align-items-center">
  <h1 class="d-inline" style="white-space: no-wrap;">This is a Test This is a Test</h1>
  <span class="badge badge-secondary ml-2">My Badge</span>
</div>

Note: I've added white-space: no-wrap; to the heading to prevent it from wrapping

Otherwise, if that's cheating, you can use transform to position it 50% up from the bottom of the last row (so it also works for multiline titles)

.badge {
  transform:translateY(-50%);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div style="width:350px;">
  <h1 class="d-inline">This is a Test This is a Test</h1>
  <span class="badge badge-secondary ml-2">My Badge</span>
</div>

However, this transformation is based on it's own height, rather than the height of the parent, so it will break when the font size is increased.

You're probably best off adding the span to the h1 element as it will give you more control; I'm sure that Google is intelligent enough to understand that pattern.

score 0 · Answer 2 · answered Jun 20 '22 at 19:06

Play with vertical-align

.badge.badge-secondary {
  vertical-align: 0.7em;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div style="width:350px;">
  <h1 class="d-inline">This is a Test This is a Test</h1>
  <span class="badge badge-secondary ml-2">My Badge</span>
</div>

How to vertically align a badge next to a multiline heading element's last line?

2 Answers2