Bootstrap 徽章 - 文本未在徽章中居中

Posted 2023-03-05

【中文标题】Bootstrap 徽章 - 文本未在徽章中居中

【英文标题】：Bootstrap Badge - Text Not Centered in Badge

【发布时间】：2018-11-17 15:54:24

【问题描述】：

我不知道如何让我的文字与我的图标中间对齐。这是使用 Chrome。见this fiddle。

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.row 
  background: #f8f9fa;
  margin-top: 20px;


.col 
  border: solid 1px #6c757d;
  padding: 10px;

<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<label class="badge badge-secondary align-middle">
  <span class="pb-2">Should Be Centered</span>
  <i class="material-icons md-18">cancel</i>
</label>

欢迎提出任何建议！

示例图片：

【问题讨论】：

你能给个能用的jsfiddle吗？

取消按钮以文本形式显示给我。

你可以试试 align-items-center 类而不是 align-middle 类。

JS 小提琴适合我。不确定您遇到问题的原因。

@theMayer 不能因为你没有在 CSS 中添加素材图标。

【参考方案1】：

您希望将 align-middle 放在徽章内容上，而不是 badge...

  <label class="badge badge-secondary">
    <span class="pb-2 align-middle">Should Be Centered</span>
    <i class="material-icons md-18 align-middle">cancel</i>
  </label>

带有 MD 图标的演示：https://www.codeply.com/go/TkAEvkUcXB

【讨论】：

谢谢，这行得通。我只是没有尝试足够的组合。

对！ Bootstrap 有实用程序类！哈哈。 :D 忘了。

【参考方案2】：

您可以引导 Flex 实用程序来实现这一点。

<label class="badge badge-secondary d-inline-flex align-items-center justify-content-start">
    <span>Should Be Centered</span>
    <i class="material-icons md-18">cancel</i>
</label>

Codepen 示例。

【参考方案3】：

你也可以使用这个属性！

 span
   vertical-align: super;