时间戳

首页 > 解决方案 > 如何在 Bootstrap 4 中的图像覆盖卡上垂直对齐？

html - 如何在 Bootstrap 4 中的图像覆盖卡上垂直对齐？

问题描述

我试图将 FontAwesome 图标置于图像叠加卡的中心，但无法垂直居中。

我尝试了多种其他建议，例如使用d-flex，justify-content-center但似乎都没有。我错过了什么？

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>

<body>
    <div class="card bg-dark text-white">
      <img class="card-img" src="http://placehold.jp/500x200.png" alt="Example">
      <div class="card-img-overlay text-center">
          <i class="fab fa-youtube fa-5x" style="color:#FF0000"></i>
      </div>
    </div>
</body>

我希望图标在图像中间居中，但只能水平对齐而不是垂直对齐。谢谢您的帮助。

标签： htmlcssbootstrap-4overlayvertical-alignment

解决方案

您可以将d-flex类添加到.card-img-overlay元素，然后添加class="align-self-center mx-auto"到内部a元素：

<div class="card bg-dark text-white">
   <img class="card-img" src="images/example.jpg" alt="Example">
   <div class="card-img-overlay d-flex">
     <a class="align-self-center mx-auto" data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
       <i class="fa fa-youtube fa-5x zoom" style="color:#FF0000"></i>
     </a>  
   </div>
</div>

align-self-center有关官方 BS4 文档的更多信息： https ://getbootstrap.com/docs/4.3/utilities/flex/#align-self

推荐阅读