Попытка правильно выровнять три элемента div с еще тремя ниже ⇐ CSS

[Anonymous]

Я пытаюсь разместить три элемента div в одной строке, которые будут выступать в качестве заголовков для трех изображений под ними, центрированных по центру текста. Я могу работать вправо и влево, но центральный просто не работает, как бы я ни старался.
Я пробовал много разных вещей, например, возился с полями
Я пробовал много разных вещей, например, возился с полями
code> и значения заполнения, изменение расположения контейнеров и перемещение изображений в отдельные элементы div. Это самое близкое, что я получил:

Код: Выделить всё

body {
background-color: #FFFDD0;
}
header {
text-align: center;
}
img {
border: 2px black groove;
width: 200px;
height: 150px;
padding: 0px;
display: block;
}
a {
text-decoration: none;
color: black;
}
div {
text-align: center;
display: absolute;
margin: 0px;
padding: 0px;
}
h3 {
clear: none;
display: inline;
}

Код: Выделить всё

    
Brent Tracker Version Log


Version 1
 
[img]https://picsum.photos/200/300?grayscale[/img]


Version 2
 
[img]https://picsum.photos/seed/picsum/200/300[/img]

Я знаю, что, вероятно, есть очень простое решение, которое мне не хватает. Я новичок в программировании.

Подробнее здесь: https://stackoverflow.com/questions/781 ... hree-below