无法居中对齐图像

我在对齐两个浮动对齐图片之间的图像时遇到问题。无法居中对齐图像

我不能在中间的图像上添加余裕。我希望它能继续以调整大小为中心。

我的代码：

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

来源

2017-08-21 Jonathan Helding

您忘记了添加html代码。 –

'float：flex;'不是有效的声明:) – Danield

html代码正常。 –

如果你想块中间显示然后而是采用浮动对准他们的形象，只是通过应用text-align:center到#imageWrap集装箱中心站他们。同时将display:inline更改为display:inline-block，以便框中的img或任何其他元素符合并调整为父宽度和高度。下面是使用你的类的示例代码，我用建议的解决方案修改了它。

P.S.建议的解决方案还使这些盒子具有响应能力。 :)

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

希望这有助于。快乐编码

来源

2017-08-21 20:14:43

非常感谢。它帮助了很多 –

无法居中对齐图像

回答

相关问题