如何在图形上放置文本以及相对于其容器在弹性盒内定位和调整盒子的大小？

Question

我正在创建一个简单的小型“旗帜大厅”HTML 页面，该页面应该有一个狭窄的旗帜列，显示为 png 图像，每个旗帜都位于 CSS 图片框架内。 CSS 框架示例here 是我的起点。我最外面的 DIV，即我的旗帜大厅，有一个柔性显示屏。在里面我放置了带有垂直堆叠的数字的 div。以下是我希望这堆图像相框的外观：

但这是它目前的样子，请注意，我在上面画了一些注释，指出了问题：

我对旗帜在框架内的外观感到满意，但我有 3 个问题：

1. 定位标牌。 figurecaption 不起作用，但 div 也不起作用。当我尝试使用绝对定位时，它是相对于文档而不是包含它的框进行的。
2. 使相框垂直居中。现在它位于容器的顶部，容器的背景是粉红色的。我希望它水平居中（确实如此）并且也在该容器内垂直居中。
3. 我的堆栈是一个狭窄的列，图片框的大小应该与其容器的百分比相同，但是如果我更改窗口的大小，它就会变得比容器长并从其下面的容器中溢出。我希望这样即使我改变了旗帜 div 的宽度，相框也将完全保持在内部并居中，无论是垂直还是水平。

这是我的完整代码，任何帮助找出最佳方法的人将不胜感激：

let countries = ["Albania", "Austria", "Belarus", "Croatia"];
let flagURLs = [
  "https://upload.wikimedia.org/wikipedia/commons/d/d0/Flag_of_Albania.png",
  "https://upload.wikimedia.org/wikipedia/commons/7/76/Flag_of_Austria.png",
  "https://upload.wikimedia.org/wikipedia/commons/7/78/Flag_of_Belarus.png",
  "https://upload.wikimedia.org/wikipedia/commons/1/18/Flag_of_Croatia.png",
];

let html = "";
for (let i = 0; i < countries.length; i++) {
  let country = countries[i];
  let flagImgURL = flagURLs[i];
  html +=
    '<div class="flag-frame-container" id="flag-frame-container-' +
    country +
    '"">' +
    ' <figure class="flag-frame-figure">' +
    '  <div class="flag-frame-outerBevel">' +
    '   <div class="flag-frame-flatSurface">' +
    '    <div class="flag-frame-innerBevel">' +
    '     <img src="' +
    flagImgURL +
    '" class="flag-frame-img">' +
    "    </div>" +
    "   </div>" +
    "  </div>" +
    '  <figurecaption class="flag-frame-caption">' +
    country +
    "  </figurecaption>" +
    " </figure>" +
    "</div>";
}
let div = document.getElementById("hall-of-flags");
div.innerHTML += html;

for (let i = 0; i < countries.length; i++) {
  let country = countries[i];
  let el = document.getElementById("flag-frame-container-" + country);
  el.addEventListener("click", function () {
    alert("I am an alert box!");
  });
}

#hall-of-flags {
  background-color: lightblue;
}

.flag-frame-container {
  background-color: pink;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  height: 40%;
}

.flag-frame-figure {
  align-self: center;
  width: 90%;
  height: 50%;
  margin: 1em auto;
}

.flag-frame-outerBevel {
  box-shadow: 4px 6px 12px 0 black;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(109, 84, 58) rgb(24, 19, 13) rgb(24, 19, 13)
    rgb(109, 84, 58);
}

.flag-frame-flatSurface {
  border: 12px solid rgb(65, 40, 16);
}

.flag-frame-innerBevel {
  border-width: 5px;
  border-style: solid;
  border-color: rgb(24, 19, 13) rgb(109, 84, 58) rgb(109, 84, 58)
    rgb(24, 19, 13);
}

.flag-frame-img {
  display: block;
  clear: both;
  height: 100%;
  width: 85%;
  padding: 7.5% 7.5% 10% 7.5%;
  background-color: rgb(255, 249, 224);
  border-width: 3px;
  border-style: solid;
  border-color: rgb(207, 166, 0) rgb(207, 166, 0) rgb(145, 110, 0)
    rgb(145, 110, 0);
}

.flag-frame-caption {
  background: #d19e1d;
  background: -webkit-linear-gradient(to right, #d19e1d, #ffd86e, #e3a812);
  background: linear-gradient(to right, #d19e1d, #ffd86e, #e3a812);
  font-family: cursive;
  text-align: center;
  border-radius: 10%;
}

<div id="hall-of-flags"></div>

尝试混合柔性和绝对定位，并希望能够将标语牌置于相框底部的中心，并将框架本身在其容器内垂直居中。

Answer 1

问题1： 将 .flag-frame-container 和 .flag-frame-caption 的位置设置为相对位置。然后你可以设置 .flag-frame-caption 的底部向上移动到框架中。

问题2： 给 .flag-frame-outerBevel 一些顶部边距，这样它就可以通过向上移动标题而获得与底部左侧类似的垂直空间。

问题3： 我无法重现您所描述的问题。

.flag-frame-container {
  /* EDIT Need this so that flag-frame-caption is positioned relative to this and not the body */
  position: relative;
  text-align: center;
}

.flag-frame-caption {
  /* EDIT */
  position: relative;
  bottom: 70px;
}

.flag-frame-outerBevel {
  /* EDIT Make it so the cyan gap between frames is centered vertically */
  margin-top: 1rem;
}