Html 把不同尺寸的徽章排成一行

我有几个代表用户的徽章。一些用户有照片（

display:block

），而其他用户只是文本（

display:inline

）

对于集装箱，我们有：

<div class="align-self-center">

每一项都是这样的：

<div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger">
  <span class="p-1">PMT</span>
  <span class="align-self-center">46h </span>
</div>

支付款
46h

就目前而言，这种方法似乎设计过度，但仍然不起作用

请告知我们如何正确地垂直对齐所有项目

---

CODEPEN:

我在包装器上使用了

显示：内联块

，以实现您的目标：

---

使用

inline block

，我可以使用

vertical align

属性将它们垂直居中。

我在包装器上使用了

display:inline block

，以实现您的目标：

---

使用

内联块

，我可以使用

垂直对齐

属性将它们垂直居中。

将

浮动：左

添加到

。徽章

---

请参见此处更新的代码笔

将

浮动：左

添加到

.badge

---

请参见此处更新的代码笔

将

display:flex

添加到容器，然后应用

align items

属性。要垂直对齐每个div中的项目，请对

div

重复该规则

.profiles，
.档案组{
显示器：flex；
对齐项目：居中；
}

PMT46h
8d
大卫8D
三维
28d
21d

将

显示：flex

添加到容器中，然后应用

对齐项目

属性。要垂直对齐每个div中的项目，请对

div

重复该规则

.profiles，
.档案组{
显示器：flex；
对齐项目：居中；
}

PMT46h
8d
大卫8D
三维
28d
21d

在关联的样式表文档中：

.badge {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline; <-- eliminate this
vertical-align: top; <-- add this
border-radius: .25rem;
}

.badge{
显示：内联块；
填充物：25em.4em；
字体大小：75%；
字号：700；
线高：1；
文本对齐：居中；
空白：nowrap；
垂直对齐：基线；在关联的样式表文档中：

.badge {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline; <-- eliminate this
vertical-align: top; <-- add this
border-radius: .25rem;
}

.badge{
显示：内联块；
填充物：25em.4em；
字体大小：75%；
字号：700；
线高：1；
文本对齐：居中；
空白：nowrap；
垂直对齐：基线；你可以作弊并将所有徽章放在一个表中，你可以使用flexbox实用程序类你可以作弊并将所有徽章放在一个表中，你可以使用flexbox实用程序类