使图像与文本正确对齐

Question

所以我创建了这个应用程序，可以让我从api获取数据并像这样显示它们：

这样，您可以看到图像和标题完全居中，但是图像的组织性不好，可以看到它们没有正确居中放置，我该如何解决？

代码：

<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代码：

div.item {
    vertical-align: top;
    /* display: inline-block; */
    text-align: center;
    /* width: 120px; */
}

.caption {
    display: block;
}