bak*_*nji 1 html css overlay vertical-alignment bootstrap-4
我试图将 FontAwesome 图标置于图像覆盖卡的中心，但无法将其垂直居中。
我尝试了多种其他建议，例如使用d-flexandjustify-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>我希望图标位于图像中间居中，但只能水平对齐，不能垂直对齐。感谢您的帮助。
小智 6
您可以将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