Html div在子元素的末尾添加空格

我刚刚为自己构建了一个容器，其中包含一个图像，悬停时显示一个文本。但现在，如果我将其中一些容器粘贴到flex容器中，似乎会在每个图像容器的末尾添加一些空间。我在这个问题上坐了几个小时，我想我现在是瞎了。我试着使用所有可能存在的展示道具，但没有一个适合我。 有人能帮我吗？我绝望了

您可以在下图中看到效果： [1] :

以下是组件的HTML：

    <div className={classes.imgWrap} style={props.divStyle}>
        <img className={classes.img} alt="img" src={props.img} style={props.imgStyle} />
        <div className={classes.imgTextWrap} style={props.imgStyle}>
            {props.textComponent}
        </div>
    </div>

包含这些图像组件的容器仅具有以下样式：

display: flex, 
justify-content: center, 
align-items: center

编辑：现在我知道这个空格是由于给

img

标签一个

width

和一个max width造成的。当

img

标记使用

宽度时，它总是为
最大宽度留出空间。在我的用例中，
85%
的
max width
大部分时间小于
width:450px
。
有什么办法可以解决这个问题吗？
您想让的列水平居中吗？所以困扰您的是图像右侧的空白区域？这就是问题所在。它没有居中，因为在右边有这个空间。图片位于flex容器中，因此它们会在移动设备上自动包装。在这些情况下，可以很明显地看到图像没有集中。如果在flex容器上添加
flexDirection:column
，会发生什么情况？这应该将主弯曲轴从上到下放入一个柱中
justifyContent:center那时可能不需要。这不起作用。我还认为问题必须在图像容器中的某个地方。我不喜欢处理空间，我更喜欢干净的解决方案（去掉空间）。
display: flex, 
justify-content: center, 
align-items: center