Alignment of Buttons Next to Images

I'm having some trouble aligning buttons and small images from a jscript source... Here's a link to the photo slider on the right, where the pink buttons need lining up with the preview images: http://www.inside-guides.co.uk/brentwood/local-tradesmen/roofers-and-roofing-services/ace-roofing-co-ltd.html

Here's the code:

<div id="photos-preview">
            <input class="photos-btn" type="button" onclick="slidePrev();" value="&lt;&lt;" />
            <% for i = 0 to ubound(images)
            %><img src="/includes/tn.asp?src=<%=server.URLEncode(images(i))%>&amp;w=30" style="margin:3px;cursor:pointer" onclick="$('.MainImage').fadeOut(500).hide(0,function(){$('#MainImage<%=images(i)%>').fadeIn(500)});" /><%
            next %>
            <input class="photos-btn" type="button" onclick="slideNext();" value="&gt;&gt;" />
       开发者_如何转开发 </div>

And the CSS:

#photo-slider {float:right;width:275px;margin:5px;border:1px
solid #B2B2D4;}
#main-photos {text-align:center;height:200px;padding:8px 0;}
#photos-preview {text-align:center;}
.photos-btn {background-color:#b21589;cursor:pointer;color:#fff;font-size:9px;font-weight:bold;padding:4px;}

Any ideas much appreciated.

Try this css:

 #photos-preview img, #photos-preview input {
    vertical-align: middle;
}

Here is a preview:

http://jsfiddle.net/k6sWJ/

Change the .photos-btn css class to:

.photos-btn {
    background-color: #B21589;
    cursor: pointer;
    color: white;
    font-size: 9px;
    font-weight: bold;
    padding: 4px;
    margin-top: 2px;
    vertical-align: top;
}

try to add vertical-align: top; for .photos-btn

make 2 css for next and previous button

and add following to your css

photo-btn-prev { float :left; }
photo-btn-next { float : right;}