Centre Images With Text Below

I'm developing a website for a school project and I'm trying to get images to display across a page with text underneath. I've been looking at it for ages but I can't seem to get a

Solution 1:

Get rid of position:absolute and set width to fit-content and margin to auto.

.middle {
    position: relative;
    overflow: hidden;
}

.rowone {
    float: left;
    width: 200px;
    margin: 1%1%45px1%;
}

.text {
    bottom: 0px;
    width:fit-content;
    margin: auto;
    background-color: gray;
}

.rowoneimg {
    width: 100%;
    display: block;
}

<sectionclass="middle"><divclass="rowone"><imgsrc="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"height="200"width="200"><divclass="text">Text</div></div><divclass="rowone"><imgsrc="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"height="200"width="200"><divclass="text">Text</div></div><divclass="rowone"><imgsrc="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"height="200"width="200"><divclass="text">Text</div></div><divclass="rowone"><imgsrc="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"height="200"width="200"><divclass="text">Text</div></div></section>