無法居中對齊圖像

我在對齊兩個浮動對齊圖片之間的圖像時遇到問題。無法居中對齊圖像

我不能在中間的圖像上添加餘裕。我希望它能繼續以調整大小爲中心。

我的代碼：

#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

非常感謝。它幫助了很多 –

無法居中對齊圖像

回答

相關問題