对齐搜索表单按钮

Question

我知道很多其他人都遇到了这个问题，我已经梳理了这个网站和其他人，并尝试了许多修复程序，这些对其他人有所帮助，而我却无所适从。 这是我的问题：

我需要将搜索按钮向下移动约2像素，以使其与输入框居中。 但是，每次我尝试调整填充或添加边距或其他任何内容时，输入框和按钮都会受到影响。

我也尝试过将类仅添加到表单的按钮部分，但是即使这样也会影响输入框。

HTML：

<div id="searchCon">    
<form role="search" method="get" id="searchform" class="searchform" action="http://somesite.com/">
<div>
    <label class="screen-reader-text" for="s">Search Our Site:</label>
    <input type="text" value="" name="s" id="s">
    <input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1;">
</div>
</form>
</div>

CSS：

 #searchCon{
    float: right;
    display: inline-block;
    height:37px;
    padding: 0px 10px 10px 280px;
    color:#2a2a2a;
}

任何帮助将不胜感激！

Answer 1

您也可以按按钮样式进行操作：

<input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1; float: right; margin-top: 1px;">