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

Question

在我的投资组合 (http://www.samnorris.co.nz) 的“关于”部分中，标题为“Digital Craftsman”，我有三个滑动部分，其中包含一个文本块和一个漂浮在其旁边的图像..

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

我很难让这些图像以较小的屏幕尺寸居中，但是，在@media 屏幕和 (max-width: 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; 
}

我的意思的一个视觉示例，这有点居中但不完全：

这个完全不居中：

Answer 1

尝试将小媒体查询的图像宽度设置为 100%。这对我来说将 Chrome 中的元素居中（并将测试推到它下面）。希望这会有所帮助。

Answer 2

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