Выровнять базовую линию двух элементов

Question

У меня есть следующее HTML & CSS:

h1 {
  display: inline-block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:500px">
  <h1>My Title</h1>
  <span class="float-right">Text on the right border</span>
</div>

• Как выровнять текст справа с базовой линией h1?
• Как выровнять текст справа в середине текста h1?

Я не хочу делать "pixel-rodeo" и корректировать высоту строки ровно до 17.533 пикселей, если вы понимаете, о чем я.

Answer 1

Вы можете использовать Flexbox следующим образом:)

Подробнее о Flexbox -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

h1 {
  display: inline-block;
}
div {
  display:flex;
  justify-content:center;
  align-items:center;
  justify-content: space-between
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:500px">
  <h1>My Title</h1>
  <span class="float-right">Text on the right border</span>
</div>

Answer 2

Вот идея без использования flexbox:

.text-justify:after {
  content:"";
  display:inline-block;
  width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
Baseline
<div style="width:500px" class="text-justify">
  <h1 class="d-inline-block ">My Title</h1> 
  <span class="d-inline-block ">Text on the right border</span>
</div>
Middle
<div style="width:500px" class="text-justify">
  <h1 class="d-inline-block align-middle">My Title</h1> 
  <span class="d-inline-block ">Text on the right border</span>
</div>

Использование flexbox Я рекомендую это решение, так как вы рассматриваете bootstrap:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
Baseline
<div style="width:500px" class="d-flex align-items-baseline">
  <h1 >My Title</h1>
  <span class="ml-auto">Text on the right border</span>
</div>
Middle
<div style="width:500px" class="d-flex align-items-center">
  <h1 >My Title</h1>
  <span class="ml-auto">Text on the right border</span>
</div>

Answer 3

Вы используете bootstrap, поэтому, если вы добавите классы row align-items-center, все дети будут отцентрированы по вертикали.
https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

h1 {
  display: inline-block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:500px" class="row align-items-center">
  <h1>My Title</h1>
  <span class="float-right">Text on the right border</span>
</div>