Bootstrap 列中文字垂直居中对齐图片的解决方案-html教程-PHP中文网

Bootstrap 列中文字垂直居中对齐图片的解决方案

聖光之護

发布： 2025-08-17 20:34:13

原创

703人浏览过

bootstrap 列中文字垂直居中对齐图片的解决方案

本文将介绍如何利用 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 文档深入学习。

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