html - 排列不同尺寸的徽章-6ren

html - 排列不同尺寸的徽章

转载作者：太空宇宙更新时间：2023-11-03 21:11:04

25

4

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

最佳答案

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

关于html - 排列不同尺寸的徽章，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46976608/

25

4

0

文章推荐： css - html元素有双框阴影效果吗？

文章推荐： python - 删除少于 X 个连续日期的观测值

文章推荐： html - 为什么背景大小为 :100% 100%; not work on this SVG?

文章推荐： python - 查找列表的索引，其中该列表是较大列表的一部分

c - 为什么这个 malloc 包装器对请求的内存大小执行此操作？尺寸 = (尺寸 + 3) & ~3;
我正在查看 DOOM 源代码，我找到了 this行。 void * Z_Malloc (int size, int tag, void *user)
window 尺寸
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 9 年前。 Improve t
c++ - 如何获得特征矩阵的形状(尺寸)？
我正从 Python 和 Numpy 转向 C++ 和 Eigen。在 Python 中，我可以使用 .shape 属性获取 Numpy 数组/矩阵的形状(维度)，如下所示: import nump
youtube - 嵌入YouTube:尺寸
固定嵌入式YouTube视频的宽度并自己照顾自己的高度是否安全？我有一个应用程序，用户可以将通知发布到公告板上。这些通知主要是文本(带有有限的html标签)和嵌入式图像。我现在要添加对嵌入式YouT
javascript - 创建后如何更改盒子的尺寸/尺寸？
可以轻松创建一个 THREE.BoxGeometry，在创建宽度、高度和深度的三个独立参数时，您必须在其中传递参数。我想创建任何和所有不带参数的THREE[types]()，并在之后设置值。有没有
JavaScript Canvas 尺寸
我在 HTML 页面上有一个 Canvas : 属性width和height将 Canvas 拉伸(stretch)到某个字段，但不调整其大小。所以 var canvasElement = docu
CSS 定位/尺寸
我在我的 css 中使用 @media all 和 (max-width: 600px) {} 作为响应式菜单，问题是它没有正确显示。我想让橙色填充绿色空间……当然，还要将绿色空间变成透明的。基本上
c++ - 尺寸、长度换算？
(我知道我问了很多关于这个的问题!) 基本上，我正在尝试将一些代码从 Matlab 转换为 C++，我遇到了这个: n = sum(size(blocks)) - len; 现在我计算了 vector
javascript - 选择类别然后显示类别.尺寸
您好，我有一个用于创建产品的表单。用户应该能够选择类别(例如 T 恤)，然后 T 恤的所有尺码(例如 S、M、L)都会下拉。用户可以输入每种尺寸的数量。 Javascript 对此不起作用。用户可以选
html - 尺寸、对齐方式和列表样式等社交图标命令对页脚没有任何影响
我正在尝试在页脚中定位和调整我的社交图标链接的大小，但是，这些命令似乎都没有效果，尤其是当我尝试调整它们的大小时。我试过将宽度和高度标记为“!重要”，但这也没有效果。这是代码的 JSFiddle:h
canvas - 给定特定尺寸的最大潜在 PNG 尺寸
我目前正在创建一个 HTML5 canvas基于绘图程序。用户可以绘制一张图像或几张图像“页面”，并将其保存到云端以供日后快速检索。这是用于交互式白板的；老师不能总是确定他们计划类(class)使用的
image - 如何为网页保存图像？ (格式/尺寸)
为网站存储图像的最佳方式是什么？我不应该超过什么尺寸？现在，我将所有界面文件保存在 png(主要是 Sprite )中，并将常用图像保存在 jpg 中。一些图像大约为 100-150Kb。保存图
jquery - fancybox iframe 尺寸
在 fancybox 主页 ( http://fancybox.net/home ) 中，有一个打开尺寸为屏幕 75% 的 iFrame 的示例。我无法按照网站上的说明通过修改 .js 文件的宽度和
iPhone 4 Nib 尺寸
我想做一个仅适用于 iPhone 4 的应用程序，该应用程序使用 iAd AdBannerView。当我添加它时，它的固定大小为 320x50。在更高分辨率下这如何工作？有人可以解释一下 iPhon
cocoa - 旋转的 NSString 尺寸
我们有一个 NSString，我们使用 - (NSSize)sizeWithAttributes:(NSDictionary *)attributes 来测量边界框。一切都好。现在我们使用标准 NS
delphi - 如何仅通过知道其句柄来确定 Canvas 尺寸？
我想知道 Canvas 的宽度和高度，但我只知道它的 HDC。我尝试过这段代码: procedure TForm92.Button1Click(Sender: TObject); var hBi
javascript - 旋转路径后计算 SVG 尺寸
问题是如何使用数学从 START SVG 维度(不带旋转)和 END SVG 维度(带旋转)获取 >开始 SVG 信息。基本上，要从 START SVG 到 END SVG，我需要执行 -115.60
oracle - 鱿鱼进口 Parquet 尺寸
我的问题是，我有一个包含50万行的Oracle表。我设置了sqoop以将其作为 Parquet 文件导入到HDFS。我将--num-partition参数设置为32，得到了32个 Parquet 文件
wordpress - YouTube 尺寸 WordPress
是否可以更改 WordPress 中当前主题的 YouTube(或其他视频)的默认嵌入尺寸？我搜索了一个插件和一些代码，但似乎找不到。我的意思是当您将 YouTube 网址粘贴到帖子或页面中时使用的
JavaFX 缩小 ImageView 尺寸
我有一个组，其中包含一个矩形和顶部的图像。我希望矩形可以调整大小，并且图像应该具有固定大小，除非矩形小于图像的情况。然后图像应该随着矩形缩小。图像还应该始终居中并有一些填充。除了图像的缩小尺寸部分

首页

博学

6Ren·AI

商城

html - 排列不同尺寸的徽章