代码之家 › 专栏 › 技术社区 › William Entriken

排列不同尺寸的徽章

twitter-bootstrap-4 vertical-alignment twitter-bootstrap css html

William Entriken · 技术社区 · 8 年前

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

4 回复 | 直到 8 年前

sol 8 年前

添加 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>

David Wilkinson 8 年前

我利用了 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 属性垂直居中。

designtocode 8 年前

float: left 到 .badge

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

holden 8 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前