css - 将文本定位在画廊的中间，使其响应

Question

如何将标题放置在画廊的顶部，如下图所示。

我正在使用我的主题附带的画廊简码。

我能够使用 position:absolute;以及最高值和最低值，然后将其与显示居中: block ；和 margin :0 自动；。但是，当我更改屏幕大小时，一切都变得不正常了。

html是

<div class="gallery-column">
[shortcode goes here]
<h2>Title goes here</h2>
</div>

Answer 1

保持元素水平和垂直居中的最简单方法是使用 flexbox .

在父元素上你需要的是:

• display: flex 将元素视为 flexbox
• align-items: center 垂直对齐
• justify-content: center 用于水平对齐
• 固定的高度(用于创建填充)- 100vh 全屏

这可以从以下方面看出:

body {
  margin: 0;
}

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

<div class="gallery-column">
  <div class="centered">
    <h2>Centered Element</h2>
  </div>
</div>

有问题的元素将保留在页面的确切中心，无论屏幕大小如何调整。

在您的情况下，您还需要一个 z-index 来确保元素保持在顶部。
z-index: 1 应该足够了。