Html 如何对齐这两个元素

我有一个文本框和一个按钮，下面用HTML/CSS描述

当前，这两个元素的按钮略低于文本框。有人能建议我如何使这两个对齐，使它们的中间位于同一水平轴上吗？谢谢

更新：显然外界看不到这个网站。稍后我将发布一些HTML来描述这些控件

更新2:这是代码：

<div id="SearchForm">

    <form method="get" action="/search/Tabs">

        <div class="search-box ActionControl">
            <input type="text" value="" name="Search" id="Search">
            <a href="/search/Tabs">Search</a>
        </div>         

        <div id="ContentArea"></div>

    </form>
</div>

#SearchForm .search-box
{
    padding: 25px;
    height: 25px;

    background-color: #F6E9D8;
    border: 1px solid #E7DFD0;
}

#SearchForm .search-box input
{
    width: 425px;
}

#SearchForm .search-box a
{
    background:url("../../Content/images/100/button-M.png") no-repeat scroll 0 0 transparent;
    border:0 none;
    color:White;
    cursor:pointer;

    font-size:8pt;

    padding-left: 22px;
    padding-right:22px;
    padding-top: 3px;
    padding-bottom: 3px;
}

#搜索表单。搜索框
{
填充：25px；
高度：25px；
背景色：#F6E9D8；
边框：1px实心#E7DFD0；
}
#搜索表单。搜索框输入
{
宽度：425px；
}
#搜索表单。搜索框a
{
背景：url（“../../Content/images/100/button-M.png”）无重复滚动0透明；
边界：0无；
颜色：白色；
光标：指针；
字号：8pt；
左侧填充：22px；
右边填充：22px；
垫面：3件；
垫底：3件；
}

这是一个快速解决方案。。。对我来说只是一个像素

#SearchForm .search-box a
{
    ... (Your existing styles)
    position: relative;
    top: -0.1em;
}

---

使用垂直对齐对我不起作用，所以这只是填隙而已。

我无法访问您的示例页面。错误消息：“您试图访问的Web服务器有一个不允许访问网站的IP地址列表，并且您的浏览计算机的IP地址在此列表中”@piquard-感谢您指出这一点。我猜系统管理员已经在那个盒子上设置了ip过滤。。。如果你们能看到的话会很方便的！问题是我认为您缺少一些样式信息。我试着在一个新的HTML页面中重新创建它，但它对我不起作用。我知道这是一个很大的工作，但是也许你可以尝试用JSFIDLE或者一些类似的工具来重现这个问题，这些工具在字体大小改变时不会对齐。em度量解决了这个问题。该示例在Firefox中的许多不同文本缩放中进行了更新和测试。在哪个浏览器中垂直对齐不起作用？在FF中工作，应该在IE 8中工作。在这种情况下，垂直对齐可能并不重要，所以我建议这“足够好”，实际上，垂直对齐对我来说很有效，即使在IE7中也是如此。我建议这是一种比调整定位更好的方法——如果其他更改导致任何一个元素的高度发生变化，垂直对齐会更明确，也更健壮。我使用的是Firefox 3.5.30729，与输入相比，按钮仍然粘在底部。

#SearchForm .search-box a
{
    ... (Your existing styles)
    position: relative;
    top: -0.1em;
}