图像旁边的按钮对齐

我在对齐jscript源的按钮和小图像时遇到了一些麻烦......以下是右侧的照片滑块链接，其中粉色按钮需要与预览图像排列在一起： http://www.inside-guides.co.uk/brentwood/local-tradesmen/roofers-and-roofing-services/ace-roofing-co-ltd.html 图像旁边的按钮对齐

下面的代码：

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

任何想法非常赞赏。

来源

2011-03-03 321

更改.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; 
}

来源

2011-03-03 12:08:16

@Sue D - 不是问题 - 萤火虫是解决这类问题的宝贵工具，无需更改您的CSS文件 – 2011-03-03 12:31:32

使2和CSS的下一个和上一个按钮

，并添加以下到你的CSS

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

来源

2011-03-03 12:04:13

尝试添加vertical-align: top;为.photos-btn

来源

2011-03-03 12:04:26 Sotiris

试一下这个CSS：

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

这里是一个预览：

http://jsfiddle.net/k6sWJ/

来源

2011-03-03 12:05:23 Bazzz

@Sue不客气。有可能选择总是很好的！：D接受你实施的方案并给予其他好的答案一票，怎么办？通过这种方式，接受的答案将获得15点声望，而投票将获得10点声望。对我来说似乎很公平。 – Bazzz 2011-03-03 18:36:31

图像旁边的按钮对齐

回答

相关问题