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

Question

我不知道如何让我的文本与我的图标中间对齐。这是使用 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>

欢迎提出任何建议!

示例图片:

Answer 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