Bootstrap中的垂直对齐示例

Bootstrap是一个开源前端框架，提供了丰富的组件和工具，使得快速构建响应式网站和Web应用程序变得简单。其中之一的核心组件就是对齐（Alignment），它能够帮助我们在页面中对元素进行垂直对齐。

垂直居中

垂直居中是对齐中最常见的需求之一，一个典型的应用场景就是让文本和图像在一个容器中垂直居中。下面是三种垂直居中的方法：

方法1：使用Flexbox实现垂直居中

可以使用Flexbox将子元素垂直居中，示例代码如下：

<div class="container d-flex align-items-center" style="height: 200px;">
  <div>
    <h1 class="text-center">Hello, World!</h1>
    <p class="text-center">This is a sample text.</p>
  </div>
</div>

解释：.container是一个包含.d-flex和.align-items-center的div，.d-flex将元素转换为Flexbox，并将所有子元素重新排列到一行，.align-items-center使子元素垂直居中。style="height: 200px;"设置了父元素的高度。

方法2：使用table-cell实现垂直居中

table-cell是HTML表格布局的基本单元，它可以将元素纵向对齐。下面是实现垂直居中的示例代码：

<div class="container" style="height: 200px; display: table;">
  <div style="display: table-cell; vertical-align: middle;">
    <h1 class="text-center">Hello, World!</h1>
    <p class="text-center">This is a sample text.</p>
  </div>
</div>

解释：.container是一个包含display: table;的div，这样就可以在其中使用table-cell布局。vertical-align: middle;使子元素垂直居中。

方法3：使用transform实现垂直居中

可以使用CSS3中的transform属性将元素上下移动，可以作为一种实现垂直居中的方法。示例代码如下：

<div class="container d-flex" style="height: 200px;">
  <div class="align-self-center mx-auto">
    <h1 class="text-center">Hello, World!</h1>
    <p class="text-center">This is a sample text.</p>
  </div>
</div>

解释：.container是一个包含.d-flex的div，.d-flex将元素转换为Flexbox，.align-self-center使子元素垂直居中，mx-auto实现水平居中。

水平对齐

除了垂直对齐，Bootstrap也提供了一些方法来实现水平对齐，下面是一些示例：

水平居中

可以使用text-center类将文本居中，示例代码如下：

<div class="container">
  <div class="col-sm-12 text-center">
    <h1>Hello, World!</h1>
  </div>
</div>

解释：.container是一个常规的Bootstrap容器，.col-sm-12占据了整个容器的宽度，text-center将文字居中。

水平两端对齐

可以使用justify-content-between将元素在一个容器内水平对齐，示例代码如下：

<div class="container">
  <div class="row justify-content-between">
    <div class="col-sm-3 bg-primary">
      <p>Left</p>
    </div>
    <div class="col-sm-3 bg-success">
      <p>Right</p>
    </div>
  </div>
</div>

解释：.row将包含列（col-*）的轮廓框架。.justify-content-between将两列之间留下空白。

居中并水平两端对齐

可以将居中的元素与容器的左侧和右侧元素对齐，示例代码如下：

<div class="container">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>Left</p>
    </div>
    <div class="col-sm-6 text-center bg-danger">
      <p>Center</p>
    </div>
    <div class="col-sm-3 bg-success">
      <p>Right</p>
    </div>
  </div>
</div>

解释：.col-sm-6占据一半的宽度，.text-center将文字居中。.bg-*是为了添加背景颜色以突出显示。

总结

Bootstrap提供了多种对齐方法，有助于我们在页面中轻松地实现垂直、水平对齐。上面的例子只是冰山一角，想要深入学习Bootstrap的对齐功能，可以到官方文档中查找更多详细信息。