代码之家 › 专栏 › 技术社区 › theMayer

引导徽章-文本未集中在徽章中

vertical-alignment bootstrap-4 css html

theMayer · 技术社区 · 6 年前

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

欢迎任何建议!

示例图像:

3 回复 | 直到 5 年前

Carol Skelly 6 年前

你会想把 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

Arup Rakshit 6 年前

你可以启动 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 例子。

Sidhanshu_ 6 年前

你也可以使用这个属性!

 span{
   vertical-align: super;
  }

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前