本文将介绍如何利用 Bootstrap 的 Flexbox 功能，特别是 align-items-center 类，来实现文字在列中垂直居中对齐图片的效果。正如摘要所述，通过简单的类添加，即可实现灵活且响应式的布局。
使用 Bootstrap Flexbox 实现垂直居中
Bootstrap 基于 Flexbox 构建，提供了强大的布局能力。要实现文字垂直居中对齐图片，只需在包含图片和文字的 .row 元素上添加 align-items-center 类。
代码示例：
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<div class="image">
<img
src="https://picsum.photos/1200/1200"
alt=""
class="img-fluid"
/>
</div>
</div>
<div class="col-lg-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>代码解释：
- .container：Bootstrap 容器，用于包裹内容。
- .row：Bootstrap 行，用于创建水平分组的列。
- align-items-center：关键类，添加到 .row 元素，使该行内的所有列在垂直方向上居中对齐。
- .col-lg-8 和 .col-lg-4：Bootstrap 列，分别占据 8/12 和 4/12 的宽度，在大型屏幕上。
- .image：包含图片的容器。
- img-fluid：Bootstrap 类，使图片自适应容器宽度。
- .text：包含文字的容器。
- h1：标题元素，包含要垂直居中的文字。
完整 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Bootstrap Vertical Align</title>
</head>
<body>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<div class="image">
<img
src="https://picsum.photos/1200/1200"
alt=""
class="img-fluid"
/>
</div>
</div>
<div class="col-lg-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>注意事项
- 确保引入了 Bootstrap 的 CSS 文件。
- align-items-center 类需要在 .row 元素上使用。
- 可以根据需要调整列的宽度（例如，使用 col-md-* 或 col-sm-* 等类）以适应不同的屏幕尺寸。
- 如果文字内容较长，可能需要调整字体大小或使用省略号来避免溢出。
- 如果需要在不同的断点上实现不同的垂直对齐方式，可以使用 Bootstrap 的响应式类，例如 align-items-sm-start，align-items-md-center 等。
总结
通过使用 Bootstrap 的 align-items-center 类，可以轻松实现列中文字的垂直居中对齐。这种方法简单、灵活，并且能够适应不同的屏幕尺寸，是构建响应式布局的有效手段。 掌握 Flexbox 的使用对于 Bootstrap 开发至关重要。 可以参考 Flexbox 指南 和 Bootstrap Flexbox 文档 深入学习。
