Align image with text properly - css

Question

So I have created this app that lets me get data from API and display them like this:
So as u can see the images and title are perfectly centered but the images are not well organized u can see they are not centered under each others properly how can I fix this?
code:
<div className="container text-center">
<div className="row">
{newPhotosLocally.map(picture =>{
return(
<div className="col-lg-4 col-md-6 col-sm-12">
<PostItem
key={picture.id}
src={picture.thumbnailUrl}
thumbnailUrl={picture.thumbnailUrl}
onClick={() => showPicture(picture.url,picture.id,picture.title)}
title={picture.title}/>
</div>
)
})}
</div>
</div>
PostItem.js:
<div>
<div className="container text-center">
<div className="row">
<div className="col-lg-4 "></div>
<div className="item">
<img src={src} onClick={onClick} alt="small post"></img>
<div className="caption">{title}</div>
</div>
</div>
</div>
</div>
css code:
div.item {
vertical-align: top;
/* display: inline-block; */
text-align: center;
/* width: 120px; */
}
.caption {
display: block;
}