如何在Bootstrap 5卡片图片的中心添加图标？

当然可以实现，核心是通过定位布局让图标覆盖在图片中心，结合Bootstrap 5的内置类就能轻松搞定。你的问题出在没有给图片和图标设置合适的定位容器，导致图标无法正确依附在图片上。

解决方案步骤： #

• 用position-relative容器包裹图片和图标，让图标能相对于这个容器定位
• 给图标添加Bootstrap的定位居中类，实现精确居中
• 可选：给图标添加样式增强视觉效果（比如半透明背景、白色图标）

修改后的完整代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Videos</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
    <link rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
</head>
<style>
    .image-thumbnail{
        object-fit: cover;
        width: 100%;
        height: 200px; /* 固定图片高度，保证卡片统一 */
    }
    .my_card{
        height: 100%;
    }
    .play-icon {
        color: white;
        text-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
</style>
<body class="m-5">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <a href="" class="d-block mb-2">All</a>
                        <a href="" class="d-block mb-2">All</a>
                        <a href="" class="d-block">All</a>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="row">
                    {% for video in my_videos %}
                    <div class="col-md-4 my-2">
                        <a href="{% url 'Play-Video' video.slug %}" class="text-decoration-none text-dark">
                            <div class="card my_card">
                                <!-- 新增相对定位容器 -->
                                <div class="position-relative">
                                    <img class="image-thumbnail" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnkEY_ZgFq4R5FRz-4d9iamx8OKOhneZTm5vKRkwizmnycE-9uI6Tea6AHLQmm5qPq_xg&usqp=CAU" alt="视频封面">
                                    <!-- 使用Bootstrap定位类实现居中 -->
                                    <i class="bi bi-play play-icon position-absolute top-50 start-50 translate-middle" style="font-size: 60px;"></i>
                                </div>
                                <div class="card-body">
                                    <p class="card-title mb-0">
                                        {{ video.title }}
                                    </p>
                                </div>
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row justify-content-center">
            <nav aria-label="分页导航">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" href="">1</a></li>
                </ul>
            </nav>
        </div>
      </div>
</body>
</html>

关键修改说明： #

1. 定位容器：给图片和图标添加了position-relative的容器，确保图标能相对于图片区域定位
2. 图标居中：使用position-absolute top-50 start-50 translate-middle这几个Bootstrap内置类，实现图标在容器的水平和垂直居中
3. 图片样式：给图片设置了固定高度height:200px，同时width:100%保证填满容器，避免卡片高度不一致
4. 视觉优化：给图标添加了白色和阴影，提升在深色图片上的辨识度
5. 链接优化：把卡片外层的a标签样式调整为text-decoration-none text-dark，避免卡片内容被链接样式影响

内容的提问来源于stack exchange，提问作者Adamu Abdulkarim Dee