如何在不嵌套span的前提下将徽章垂直对齐到多行h1最后一行中部

无需调整DOM结构，不需要将徽章嵌套入h1标签，完全满足SEO要求，仅通过Bootstrap 4自带工具类即可实现对齐效果：

• 保留h1标签原有的d-inline类，让标题以行内元素形式排布、支持自动折行
• 给徽章添加align-middle类，修正垂直对齐逻辑；如果视觉上存在微小偏移，可通过内联样式微调vertical-align数值即可

实现原理 #

Bootstrap 4的徽章默认对齐方式为vertical-align: baseline，即徽章底部对齐文字基线，加上徽章字号小于h1标题字号，视觉上会偏下、贴近容器底部。align-middle类会将徽章设置为vertical-align: 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 mb-0">This is a Test This is a Test</h1>
  <span class="badge badge-secondary ml-2 align-middle">My Badge</span>
</div>

如果实际使用时对齐精度有偏差，可以给徽章添加类似style="vertical-align: 0.15em"的样式，根据字号大小微调偏移量即可。

内容的提问来源于stack exchange，提问作者Philipp S.