Как я могу разместить текст над фигурой, а также расположить и изменить размер поля внутри флексбокса относительно его к ⇐ CSS

[Anonymous]

Я создаю простую небольшую HTML-страницу «Зал флагов», на которой должен быть узкий столбец флагов, отображаемый в виде изображений PNG, каждый из которых находится внутри рамки изображения CSS. Пример CSS-фреймов здесь был моей отправной точкой. Мой самый внешний DIV, то есть зал флагов, имеет гибкий дисплей. Внутри я помещаю элементы div с фигурами, которые складываю вертикально. Ниже показано, как я хочу, чтобы эта стопка рамок изображений выглядела:


Но вот как это выглядит на данный момент, заметьте, у меня есть пара нарисованных заметок, указывающих на проблемы:


Мне нравится, как флаги выглядят внутри рамки, но у меня есть 3 проблемы:

• Размещение плаката. Подпись к фигуре не будет работать, но и div тоже. Когда я пытаюсь использовать абсолютное позиционирование, это делается относительно документа, а не поля, в котором он содержится.
• Центрирование рамки изображения по вертикали. Сейчас он находится в верхней части контейнера с розовым фоном. Я бы хотел, чтобы он располагался по центру по горизонтали (так оно и есть), а также по вертикали внутри этого контейнера.
• Моя стопка представляет собой узкий столбец, и размер рамки изображения должен составлять один и тот же процент его контейнер, но если я изменю размер окна, оно станет длиннее контейнера и выльется из контейнера под ним. Мне бы хотелось, чтобы даже если я изменю ширину элемента 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 +=
'

Подробнее здесь: [url]https://stackoverflow.com/questions/79084207/how-can-i-position-text-over-a-figure-and-position-and-size-a-box-inside-a-flexb[/url]