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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:350px;">
  <h1 >This is a Test This is a Test</h1>
  <span >My Badge</span>
</div>

Expected result:

CodePudding user response：

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

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

<div style="width:350px;" >
  <h1  style="white-space: no-wrap;">This is a Test This is a Test</h1>
  <span >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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div style="width:350px;">
  <h1 >This is a Test This is a Test</h1>
  <span >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.

CodePudding user response：

Play with vertical-align

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div style="width:350px;">
  <h1 >This is a Test This is a Test</h1>
  <span >My Badge</span>
</div>