如何实现Bootstrap列表项中图片与文本的垂直居中对齐

问题描述 #

我有一个列表，每个列表项包含图片图标、标题及次要描述，希望将图片图标与文本实现垂直居中对齐。

当前效果：

期望效果：

我的Bootstrap 5代码示例：

<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<ul class="list-group">
<li class="list-group-item">
<div class="btn-group float-end">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
<li><a class="dropdown-item" href="#">Run</a></li>
</ul>
</div>
<img src="https://img.icons8.com/color/48/000000/networking-manager.png"/>            A First item<br/>
<small class="text-secondary">This is a first item description</small>
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> What is Lorem Ipsum? </div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</body>
</html>

解决方案 #

利用Bootstrap 5内置的flex布局类就能实现需求，无需额外自定义CSS，步骤如下：

1. 把图标和文本包裹在带d-flex align-items-center的容器中，前者启用flex布局，后者实现垂直方向居中对齐。
2. 给图标添加me-3类，设置图标与文本的右侧间距，优化视觉体验。

修改后的核心代码片段：

<li class="list-group-item">
  <div class="btn-group float-end">
    <!-- 下拉按钮代码保持不变 -->
  </div>
  <div class="d-flex align-items-center">
    <img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="me-3"/>
    <div>
      A First item<br/>
      <small class="text-secondary">This is a first item description</small>
    </div>
  </div>
  <!-- 模态框代码保持不变 -->
</li>

完整修改后的代码：

<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<ul class="list-group">
<li class="list-group-item">
<div class="btn-group float-end">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
<li><a class="dropdown-item" href="#">Run</a></li>
</ul>
</div>
<div class="d-flex align-items-center">
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="me-3"/>
<div>
A First item<br/>
<small class="text-secondary">This is a first item description</small>
</div>
</div>
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> What is Lorem Ipsum? </div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</body>
</html>

原理说明 #

• d-flex：将容器转为flex布局，让内部元素可使用flex对齐属性。
• align-items-center：使flex容器内的元素在垂直方向上居中，正好匹配图标与文本的对齐需求。
• me-3：Bootstrap的间距类，设置元素右侧margin，避免图标和文本紧贴，提升美观度。

内容的提问来源于stack exchange，提问作者Code Guy