How can I center/float these images properly?

Question

In the About section of my portfolio (http://www.samnorris.co.nz) under the heading 'Digital Craftsman' I have three sliding sections with a text block and an image floated next to it..

My site is intended to be responsive, so at smaller screen sizes the layout in this section is meant to shift the (smaller sized versions of) images above the block of text and - ideally - be centered.

I am having great difficulty in getting these images to be centered at the smaller screen sizes however, at @media screen and (max-width: 320px) for example they are all over the place, margin: 0 auto seems to have no effect at all with any combination of float or display setting I have tried... at tablet size @media screen and (min-width: 500px) and (max-width: 900px) I have managed a kind of pseudo-centering by playing around with uneven margins, but isn't really ideal...

is there something I'm missing here? is there an easier way to do this?

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

Media Query example

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

A visual example of what I mean, this is somewhat centered but not entirely:

This one is not centered at all:

Answer 1

Try setting the width of the images to 100% for the small media query. This centered the element in Chrome for me (and pushed the test below it). Hope this helps.

Answer 2

Try setting the margin of the images to auto, or if still not working, set it's parent text-align to center.