我需要像卡片一样制作,我已经用 div、图像和文本制作了它,但我不知道如何将它们垂直居中。这是我的卡片的外观:
它应该是这样的:
这是div的代码:
<div class="panel mx-auto col align-items-center">
<img class="atajo-content" :src="shortcut.img" height="83" />
<p class="pt-1 card-name text-wrap">{{ shortcut.name }}</p>
</div>
而且我无法将图标与字体居中。我已经用几乎所有的引导程序组合对其进行了测试,但我无法理解会发生什么。
答案 0 :(得分:0)
你能看看下面的代码吗?希望它对你有用。如果您希望您的内容垂直居中,那么您需要为父级 .main-content
提供特定的高度。在这里,我们使用了 flex 实用程序类来根据您的要求将内容居中。
请参考此链接:https://jsfiddle.net/yudizsolutions/n39zby6g/
.main-content {
height: 100vh;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="main-content d-flex align-items-center justify-content-center">
<div class="panel">
<img class="atajo-content" src="https://via.placeholder.com/100x50" height="83" />
<p class="pt-1 card-name text-wrap">{{ shortcut.name }}</p>
</div>
</div>