Bootstrap 列中文字垂直居中对齐图片的解决方案-小浪学习网

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">         @@##@@       </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">             @@##@@           </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 列中文字垂直居中对齐图片的解决方案