如何正确居中/漂浮这些图像？

Question

在我的投资组合的关于部分（http://www.samnorris.co.nz）的“数字工匠”标题下，我有三个滑动部分，其中有一个文本块，旁边有一个浮动的图像..

我的网站旨在提供响应，因此在较小的屏幕尺寸下，本节中的布局旨在将（较小尺寸版本的）图像转移到文本块上方，并且 - 理想情况下 - 居中。

我很难让这些图像以较小的屏幕尺寸为中心，但是，在@media屏幕和（最大宽度：320px），例如它们到处都是，边距：0自动似乎有任何浮动或显示设置的组合都没有效果我试过...在平板电脑尺寸@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; 
}

我的意思的一个直观的例子，这有点居中但不完全：

这个根本不是中心：

Answer 1

尝试将小图片的宽度设置为100％。这对我来说是Chrome中的元素（并将测试推到它下面）。希望这会有所帮助。

Answer 2

尝试将图像边距设置为自动，或者如果仍然无效，请将其父文本对齐设置为居中。