Question

我在jscript源上对齐按钮和小图片时遇到了一些麻烦...这里是右边照片滑块的链接，粉红色按钮需要与预览图像对齐：http://www.inside-guides.co.uk/brentwood/local-tradesmen/roofers-and-roofing-services/ace-roofing-co-ltd.html < / p>

以下是代码：

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

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

任何想法都非常感激。

Answer 1

试试这个css：

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

这是预览：

http://jsfiddle.net/k6sWJ/

Answer 2

尝试为vertical-align: top;

添加.photos-btn

Answer 3

将.photos-btn css类更改为：

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

Answer 4

为下一个和上一个按钮

制作2个css

并将以下内容添加到您的css

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

图像旁边的按钮对齐

4 个答案: