Horizontal scrolling page of images with no border/padding and vertically centered on the page! Possible?

I've looked at a number of examples of horizontal scrolling and centering content vertically, but none in combination - and this seems to have created a real challenge! (and a sore head!)

Here's where I am at - the page scrolls fine, but the content isn't ver开发者_如何学JAVAtically centered and the images have spacing around them (caused by white-space: nowrap; ??)

<style type="text/css">
    body{
        background:#272727;
    }

    .wrapper {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .container {
        display: table-cell;
        vertical-align: middle;
    }

    .content {
        float:left;
        white-space: nowrap;
        padding:0;
        margin:0;    
    }

    img {
        display:inline;
        border:none;
        padding:0;
        margin:0;
    }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function(){
var screenHeight = $(document).height();
var contentHeight = 733;
var difference = (screenHeight - contentHeight)/2;
alert(difference);
$('.content').css({'margin-top': difference});
});

</script>