如何在 HTML 容器中垂直对齐项目 - CSS

在 HTML 中垂直对齐项目是一个常见的需求，特别是当有多个项目需要在同一个容器中垂直对齐时。本文将介绍如何通过 CSS 来实现在 HTML 容器中垂直对齐项目。

方法一：使用 flexbox

flexbox 是一种强大的布局方式，可以轻松实现在容器中垂直对齐项目。实现方法如下：

1. 在容器上应用 display: flex 属性。
2. 应用 align-items: center 属性。这会将项目在容器中垂直居中。

以下是示例代码：

.container {
  display: flex;
  align-items: center;
}

方法二：使用 line-height

使用 line-height 属性也可以实现在容器中垂直对齐项目。具体方法如下：

1. 在容器中添加一个块级元素，例如 <div>。
2. 将容器中的所有项目放置在该块级元素中。
3. 应用 line-height 属性，并将其值设置为容器高度。

以下是示例代码：

<div class="container">
  <div class="content">
    <p>这是一段文本</p>
    <button>这是一个按钮</button>
  </div>
</div>

<style>
.container {
  height: 200px;
  line-height: 200px;
  text-align: center; /* 水平居中项目 */
}
.content {
  display: inline-block;
  vertical-align: middle;
}
</style>

方法三：使用 table-cell

使用 table-cell 属性也可以实现在容器中垂直对齐项目。具体方法如下：

1. 在容器中添加一个块级元素，例如 <div>。
2. 将容器中的所有项目放置在该块级元素中。
3. 将该块级元素设置为表格单元格，并应用 vertical-align: middle 属性。

以下是示例代码：

<div class="container">
  <div class="content">
    <p>这是一段文本</p>
    <button>这是一个按钮</button>
  </div>
</div>

<style>
.container {
  display: table;
  height: 200px;
  width: 100%;
}
.content {
  display: table-cell;
  vertical-align: middle;
}
</style>

以上三种方法都可以实现在 HTML 容器中垂直对齐项目。具体选择哪种方法，可以根据实际情况和自己的需求来决定。