Jquery Center image in a slider div
<p>I want to center the image in a <code>div</code>. My code is,</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;test&lt;/title&gt;
    &lt;style type="text/css"&gt;
        .wrapper { 
            background:#EFEFEF; 
            margin: auto; 
            position: relative;
            margin-bottom: 20px !important;
            width: 800px;
            padding-top: 5px;
        }
        .scrolls { 
            overflow-x: scroll;
            overflow-y: hidden;
            height: 400px;
        } 
        .imageDiv { 
            margin: 0;
            height: 400px;
        } 
        .imageDiv img { 
            max-height: 400px;
            cursor: pointer;
            margin-left:20px;
        }
    &lt;/style&gt;
    &lt;script type="text/javascript" src="jquery-latest.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        $(document).ready(function(){
            var wh=$(window).height()/4;
            $('.wrapper').css('margin-top',wh);
        });
        $(window).load(function(){
            var tw = 0;
            $.each($('.imageDiv img'), function() {
                tw += $(this).width();
            });
            $('.imageDiv').width(tw);
            $('.imageDiv img').click(function(){
                var imgid=$(this).attr('id');
                var width = $(imgid).width();
                var margin = width/2;
                $(imgid).css("margin-left","-"+margin);
            });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="scrolls"&gt;
            &lt;div class="imageDiv"&gt;
                    &lt;img src="001_19_3.jpg" id="img1"/&gt;
                    &lt;img src="002_21_3.jpg" id="img2"/&gt;
                &lt;img src="003_19_3.jpg" id="img3"/&gt;
                &lt;img src="004_19_3.jpg" id="img4"/&gt;
                &lt;img src="005_15_3.jpg" id="img5"/&gt;
                &lt;img src="NB_1a_3.jpg"  id="img6"/&gt;
                &lt;img src="NB_2_3.jpg"   id="img7"/&gt;
                &lt;img src="NB_3_3.jpg"   id="img8"/&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p>If i click an image in the slider, that image should go to the center of the div. And also the scroller want to move according to the position of the image. Any one can help? please!</p>
