如何使图像上方的文本居中？

当在 HTML 页面中放置图像和文本时，想要让文本居中且放置在图像的上方可能是一件棘手的事情。 然而，这并不是不可能实现。 下面将介绍几种实现这一目标的方式。

1. 使用 Flexbox

使用 Flexbox（弹性盒子布局）可能是最简单的方法之一，特别是在布局中只有几个项目时。使用以下代码片段可实现：

<div class="container">
  <img src="image.jpg" alt="Example image">
  <h2>Example Text</h2>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

img {
  margin-bottom: 1rem;
}

这里，我们首先创建一个容器元素，并在其中放置图像和标题元素。 然后将容器元素设置为使用 Flexbox，并设置其 align-items 和 justify-content 属性以使其垂直居中和水平居中。 最后，可以通过为图像元素添加 margin-bottom 属性来为图像添加一些行距。

2. 使用绝对定位

使用绝对定位是另一种实现此目标的方法。 使用以下 HTML 和 CSS 代码实现：

<div class="container">
  <img src="image.jpg" alt="Example image">
  <h2>Example Text</h2>
</div>

.container {
  position: relative;
  height: 100vh;
}

img {
  display: block;
  margin: 0 auto;
}

h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在这种方法中，我们首先为容器元素设置相对位置。之后，可以将图像元素的显示属性设置为块级元素，并将其 margin 属性设置为 auto，以使其水平居中。 接下来，将标题元素的位置设置为绝对，然后使用 top、left 和 transform 属性将其定位在图像的正上方并进行垂直和水平居中。

结论

以上就是使图像上方文本垂直居中的两种方式。 如果您还有其他方法，请在评论中分享！