无法居中对齐图像

Question

我在两张浮动对齐的照片之间居中存在问题。

我无法在中间向图像添加边距。我希望它能够专注于调整大小。

我的代码：

#skjirt {
    display: inline;
    margin-left: auto;
    margin-right: auto;
    float: flex;
    height: 400px;
    width: 400px;
    border: 3px solid #662C49;
    margin-top: 20px;
}

#skjirt1 {
    display: inline;
    float: left;
    margin-left: 20px;
    height: 400px;
    width: 400px;
    border: 3px solid #662C49;
    margin-top: 20px;
}

#skjirt2 {
    display: inline;
    float: right;
    height: 400px;
    width: 400px;
    border: 3px solid #662C49;
    margin-top: 20px;
    margin-right: 20px;
}

#imageWrap {
    width: 100%;
    height: auto;
    margin-top: 100px;
}

Answer 1

如果要在中间显示图像块，而不是使用float对齐它们，只需将text-align:center应用到#imageWrap容器中心即可。同时将display:inline更改为display:inline-block，以使img或框内的任何其他元素符合并调整为父级宽度和高度。下面是使用您的类的示例代码，我使用建议的解决方案对其进行了修改。

P.S。建议的解决方案也使盒子具有响应性。 ：）

https://codepen.io/Nasir_T/pen/wqjKoa

希望这会有所帮助。快乐编码