在标题内垂直对齐 Bootstrap 徽章

Posted 2023-03-06

【中文标题】在标题内垂直对齐 Bootstrap 徽章

【英文标题】：Vertically align Bootstrap badge inside heading

【发布时间】：2013-10-27 10:36:14

【问题描述】：

当我在标题内使用 Bootstrap badge 时，例如 h1,h2,h3，垂直对齐关闭。 badge 与标题文本的底部对齐。我希望徽章与标题文本垂直居中对齐。

HTML

<h1><span class="badge">badge</span> Heading 1</h1>
<hr>
<h2><span class="badge">badge</span> Heading 2</h2>
<hr>
<h3><span class="badge">badge</span> Heading 3</h3>

CSS

h1,h2,h3 
  vertical-align:middle;


h1>.badge, h2>.badge, h3>.badge 
  vertical-align:middle;

结果..

查看此 Bootply：http://bootply.com/88526

如何让它垂直居中对齐？

【参考方案1】：

一直讨厌这个问题。

有点 hacky，但这很有效：

h1  font-size: 2em; 
h2  font-size: 1.6em; 
h3  font-size: 1.4em; 
h1,h2,h3 
    vertical-align:middle;


  h1>.badge, h2>.badge, h3>.badge 
    vertical-align:middle;
    margin-top: -0.5em;

为演示目的定义了标题字体大小

【讨论】：

我可以使用单行：h3>.badge vertical-align: middle

我不需要 margin-top（事实上，设置 margin-top 会弄乱对齐）。

我也不需要在 h1、h2、h3 上设置垂直对齐 - 只是徽章 - 同意布伦特的评论。

我也需要顶部边距。谢谢各位。

【参考方案2】：

在 Bootstrap 4 中，垂直对齐问题不再是问题，因为徽章将继承包含标题的大小..

<div class="container">
  <h1><span class="badge badge-pill badge-dark">badge</span> Heading 1</h1>
  <hr>
  <h2><span class="badge badge-pill badge-dark">badge</span> Heading 2</h2>
  <hr>
  <h3><span class="badge badge-pill badge-dark">badge</span> Heading 3</h3>
</div>

但是，align-middle 类可用于垂直对齐标题之外的徽章。

<div class="container">
  <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h1 align-middle">Heading 1</span>
  <hr>
  <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h2 align-middle">Heading 2</span>
  <hr>
  <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h3 align-middle">Heading 3</span>
</div>

演示：https://www.codeply.com/go/rE0z3665zh