Bootstrap 列中文字垂直居中对齐图片的终极指南-html教程-PHP中文网

Bootstrap 列中文字垂直居中对齐图片的终极指南

聖光之護

发布： 2025-08-17 21:14:01

原创

360人浏览过

bootstrap 列中文字垂直居中对齐图片的终极指南

本文将详细介绍如何在 Bootstrap 栅格系统中实现文字相对于图片垂直居中对齐。正如摘要所说，只需简单地利用 Bootstrap 的 Flexbox 功能，即可轻松解决文字与图片在不同屏幕尺寸下的对齐问题。

利用 Bootstrap Flexbox 实现垂直居中

Bootstrap 基于 Flexbox 构建，为我们提供了强大的布局控制能力。要实现文字垂直居中对齐图片，最简单有效的方法是在包含图片和文字的 row 元素上添加 align-items-center 类。

示例代码

以下是一个完整的 HTML 示例，展示了如何使用 align-items-center 类来实现垂直居中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Vertical Alignment</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-8">
        <div class="image">
          <img src="https://picsum.photos/1200/1200" alt="Image" class="img-fluid">
        </div>
      </div>
      <div class="col-md-4">
        <div class="text">
          <h1>Text Title</h1>
          <p>This is some sample text that needs to be vertically aligned with the image.</p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

登录后复制

代码解释：

<div class="row align-items-center">: 这一行是关键。align-items-center 类应用于 row 元素，它指示 Flexbox 将其子元素（即包含图片和文字的列）沿交叉轴（垂直方向）居中对齐。
<div class="col-md-8"> 和 <div class="col-md-4">: 这两个 div 分别定义了图片和文字所在的列。col-md-8 表示图片占据 8/12 的宽度，col-md-4 表示文字占据 4/12 的宽度。md 表示 medium 尺寸，即在屏幕宽度达到 medium 尺寸时，采用这种布局。
<img src="https://picsum.photos/1200/1200" alt="Image" class="img-fluid">: img-fluid 类确保图片在容器内自适应宽度，保持响应式。

深入理解 Flexbox

align-items-center 实际上是 CSS Flexbox 的一个属性。Flexbox 是一种强大的 CSS 布局模块，它提供了一种更有效的方式来对齐、分配容器中的项目空间，即使它们的大小是未知的或动态的。“align-items: center;” 属性指示 Flexbox 容器内的项目在其容器的交叉轴上居中。

其他 Flexbox 属性

除了 align-items-center，Flexbox 还提供了其他有用的属性：

justify-content: 控制项目在主轴上的对齐方式（例如：justify-content: center;、justify-content: space-between;）。
align-content: 控制多行 Flexbox 容器中行的对齐方式。
flex-direction: 定义主轴的方向（例如：flex-direction: row;、flex-direction: column;）。

可以参考Flexbox 指南和 Bootstrap Flex 工具类深入了解 Flexbox。

注意事项

Bootstrap 版本： 确保你使用的 Bootstrap 版本支持 Flexbox 功能（Bootstrap 4 及以上版本）。
容器高度： 如果容器的高度没有明确定义，align-items-center 可能不会产生预期的效果。确保容器有足够的高度来容纳内容，以便垂直居中生效。
响应式设计： 根据需要在不同的屏幕尺寸下调整列的宽度，以保持良好的布局效果。可以使用 Bootstrap 的响应式列类（例如：col-sm-*, col-md-*, col-lg-*）来实现。

总结

通过在 Bootstrap 的 row 元素上添加 align-items-center 类，可以轻松实现文字内容相对于图片垂直居中对齐。这种方法简单有效，并且能够很好地适应不同的屏幕尺寸。掌握 Flexbox 的基本概念和 Bootstrap 提供的 Flex 工具类，可以帮助你更灵活地控制页面布局，创建更美观、更具响应性的 Web 应用程序。

以上就是Bootstrap 列中文字垂直居中对齐图片的终极指南的详细内容，更多请关注php中文网其它相关文章！