使用 CSS 实现标题、标签和图像对齐

在 HTML 中，我们经常需要将标题、标签和图像进行布局，使其能够美观地展现在页面上。本文将介绍如何使用 CSS 实现这种布局。

一、使用 flexbox 实现对齐

Flexbox 是一个强大的布局模型，可以在容器内快速、自适应地布局子元素。以下是基本的使用步骤：

1. 使用 display: flex 将容器设置为 flex 布局模型。
2. 使用 flex-direction 设置子元素排列方向（横向或纵向）。
3. 使用 justify-content 和 align-items 分别设置子元素在容器中水平对齐和垂直对齐方式。

.container {
  display: flex;
  flex-direction: row; /* 横向排列 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 图像和标签的样式 */
img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

label {
  font-size: 16px;
  font-weight: bold;
}

<div class="container">
  <img src="image.png" alt="图片">
  <label>这是一个标签</label>
  <h1>这是标题</h1>
</div>

二、使用 grid 实现对齐

另一种常用的布局模型是 grid，它可以将容器划分为行和列，将子元素放入对应的单元格中。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 分为两列 */
  grid-template-areas:
    "image label"
    "image title"; /* 指定子元素在格子中的位置 */
}

/* 图像和标签的样式 */
img {
  grid-area: image;
  width: 100px;
  height: 100px;
}

label {
  grid-area: label;
  font-size: 16px;
  font-weight: bold;
}

h1 {
  grid-area: title;
  font-size: 24px;
  font-weight: bold;
}

<div class="container">
  <img src="image.png" alt="图片">
  <label>这是一个标签</label>
  <h1>这是标题</h1>
</div>

结语

以上是两种常用的 CSS 布局方式，可以实现标题、标签和图像的对齐。程序员需要根据实际情况选择合适的布局方式，让页面更加美观、易读。