如何正確居中/浮動這些圖像？

在關於標題「數字工匠」我有一個文本塊和浮動旁邊給它的圖像三個滑動部分在我的投資組合（http://www.samnorris.co.nz）第..如何正確居中/浮動這些圖像？

我的網站是爲了響應，所以在較小屏幕尺寸的情況下，本節中的佈局旨在將文本塊上面的圖像（較小尺寸版本）移動到文本塊上方，並且理想情況下是居中。

我很難讓這些圖像以較小的屏幕尺寸爲中心，但是，在@media屏幕和（最大寬度：320px）例如它們都在這個地方，margin：0 auto似乎是完全沒有任何影響浮點或顯示設置的任何組合我嘗試過......在平板電腦尺寸@media屏幕和（最小寬度：500px）和（最大寬度：900px）我已經管理了一種僞中心通過玩弄利潤率不均勻，但並不是很理想......

有什麼我在這裏失蹤？有沒有更簡單的方法來做到這一點？

相關CSS

.about-featureimg { 
    display: block; 
    float: right; 
} 

.lionhead { 
    background: url("../img/lionhead.jpg") no-repeat center;  
    width: 455px; 
    height: 400px; 
    margin: 0 0 15px 45px; 
    display: block; 
    float: right; 
} 

.astroslinger { 
    background: url("../img/astroslinger.gif") no-repeat center;  
    background-size: cover; 
    min-width: 500px; 
    height: 425px; 
    margin: 10px 0 15px 45px; 
} 

.spacedude { 
    background: url("../img/spacedude.jpg") no-repeat center; 
    width: 545px; 
    height: 455px; 
    margin: 10px 0 25px 75px;  
}

媒體查詢例子

.about-featureimg { 
    display: block; 
    margin: 0 auto; 
} 

.astroslinger { 
    background: url("../img/astroslinger-sm.jpg") no-repeat center;  
    width: 325px; 
    height: 220px; 
    margin: 25px 15px 25px 15px; 
} 

.lionhead { 
    background: url("../img/lionhead-sm.jpg") no-repeat center;  
    width: 290px; 
    height: 300px; 
    margin: 0 auto; 
} 

.spacedude { 
    background: url("../img/spacedude-sm.jpg") no-repeat center;  
    width: 376px; 
    height: 257px; 
    margin: 0 auto; 
}

我的意思視覺例子，這在一定程度上居中，但不完全：

enter image description here