CSS 实现图片和 H2 标题在同一行显示

标题

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

img, h2 {
  display: inline-block;
}

实现图片和 H2 标签在同一行显示，可以使用 CSS 中的 display 属性。

1. 设置 display: flex：将包含图片和 H2 标签的 div 的 display 属性设置为 flex。这将使 div 的子元素按照一定规则排列。
2. 设置 display: inline-block：将图片和 H2 标签的 display 属性设置为 inline-block。这将使这两个元素能够在同一行上显示。
3. 调整位置：使用 justify-content 和 align-items 属性来调整图片和 H2 标签在同一行上的位置。

代码示例：

HTML 代码：

<div class='container'>
  <img src='图片路径' alt='图片描述'>
  <h2>标题</h2>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

img, h2 {
  display: inline-block;
}

注意：

• 您可以根据需要调整 justify-content 和 align-items 属性的值，以实现不同的布局效果。
• 确保图片路径正确，并为图片添加 alt 属性以提供文本描述。