无法居中对齐图像

时间:2017-08-21 19:58:52

标签: html css html5 css3

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

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

enter image description here

我的代码:

#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;
}

1 个答案:

答案 0 :(得分:1)

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

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

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

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