React,HTML,CSS Center Name under Image

Question

I'm having trouble centering a span under an image. Here's what I'm working with. I have an array of objects and I want to output their key-value pairs.

     var data = profile.map((item, i) => {
        return <li className={styles.item}>
                    <img className = {styles.image_item} src={Object.values(item)}/>
                    <br/>
                    <br/>
                    <span className = {styles.name_item}>{Object.keys(item)}</span>
                </li>
    })

My HTML code contains this:

    <ul className = {styles.container}>
        {data}
    </ul>

My issue is that name isn't properly aligned under the image. I tried messing with the margin of the span but it doesn't work since names can be different lengths making everything out of place. Is there a way to properly center the name under the image with what I'm doing?

.container{
display:flex;
width: 70%;
text-decoration: none;
padding-left: 0px;
margin-left: 75px;
margin-top: -100px;
flex-wrap: wrap;
}

.item{
    display: inline;
    flex: 0 0 33%;
    margin-top: 150px;
}

.image_item{
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.name_item{
    text-align: center;
}

Answer 1

Span is inline element which doesn't fill parent width. Swap with and should work.