排列不同尺寸的徽章答案

【问题标题】：Line up badges of different sizes排列不同尺寸的徽章
【发布时间】：2017-10-27 22:06:12
【问题描述】：

我有几个代表用户的徽章。一些用户有照片 (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>

事实上，这种方法似乎被过度设计了，但仍然不起作用。

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

编解码器：https://codepen.io/anon/pen/EbYJyd?editors=1100#0

【问题讨论】：

你可以作弊，把所有的徽章放在一张桌子上，codepen.io/anon/pen/vWBMdL?editors=1100
你可以使用 flexbox 工具类

标签： html css twitter-bootstrap vertical-alignment twitter-bootstrap-4

【解决方案1】：

将display: flex 添加到容器中，然后应用align-items 属性。要垂直对齐每个 div 中的项目，请重复 div 的规则。

.profiles,
.profiles div {
  display: flex;
  align-items: center;
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>

<body>
  <div class="profiles">
    <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>46h </span></div>
    <div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><img height="30" title="debbcarol not online on Slack" class="rounded translucent" src="https://avatars.slack-edge.com/2017-06-01/191787258759_1f147d9c455250f2399c_72.jpg"> <span>8d </span></div>
    <div style="height:30px" class="pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><span class="p-1">David</span><span>8d </span></div>
    <div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><img height="30" title="robgarza" class="rounded" src="https://avatars.slack-edge.com/2016-11-05/100970331412_61a091a494a137be0188_72.png"> <span>3d </span></div>
    <div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><img height="30" title="alinan523" class="rounded" src="https://avatars.slack-edge.com/2017-07-11/211053436291_0695a1cedc52065260b5_72.png"> <span>28d </span></div>
    <div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"><img height="30" title="will not online on Slack" class="rounded translucent" src="https://avatars.slack-edge.com/2016-10-20/93977971973_091d34c1388d122e488e_72.jpg"> <span>21d </span></div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

我在这里的包装器上使用了display: inline-block 来实现您所追求的：https://codepen.io/anon/pen/oovOdN?editors=1100#0。

div.pl-0 {
    display: inline-block;
    vertical-align: middle;
}

使用inline-block，我可以利用vertical-align 属性将它们全部垂直居中。

【讨论】：

【解决方案3】：

将float: left 添加到.badge

在此处查看更新的 codepen https://codepen.io/msbodetti/pen/NwKmzw?editors=1100

【讨论】：

【解决方案4】：

在相关的样式表文档中：

.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;
}

【讨论】：