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>

现在看来，这种方法似乎过度设计，但仍无效。

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

CODEPEN：https://codepen.io/anon/pen/EbYJyd?editors=1100#0

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

Answer 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属性将它们全部垂直居中。

Answer 3

将float: left添加到.badge

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

Answer 4

在关联的样式表文档中：

%%pattern

排列不同大小的徽章

4 个答案: