Bootstrap 居中 div 图像和文本

Question

我需要像卡片一样制作，我已经用 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>

而且我无法将图标与字体居中。我已经用几乎所有的引导程序组合对其进行了测试，但我无法理解会发生什么。

Answer 1

你能看看下面的代码吗？希望它对你有用。如果您希望您的内容垂直居中，那么您需要为父级 .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>