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 p

Solution 1:

Try this css:

#photos-previewimg, #photos-previewinput {
    vertical-align: middle;
}

Here is a preview:

http://jsfiddle.net/k6sWJ/

Solution 2:

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

Solution 3:

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

Solution 4:

make 2 css for next and previous button

and add following to your css

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