排列不同尺寸的徽章

Question

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

Answer 1

我在这里的包装器上使用了 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 属性将它们全部垂直居中。

Answer 2

添加一个float: left到.badge

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

Answer 3

将 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>

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

排列不同尺寸的徽章

Line up badges of different sizes

html

css

twitter-bootstrap

vertical-alignment

twitter-bootstrap-4