Bootstrap 居中 div 图像和文本

伊万·帕拉

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

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

尤迪兹解决方案

你能检查一下下面的代码吗？希望它对你有用。如果您希望您的内容垂直居中，那么您需要为 parent 提供特定的高度.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。