Как я могу совместить эти два элемента

Question

У меня есть текстовое поле и кнопка, которые описаны с помощью 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;
}

Answer 1

Это быстрое решение ... это был всего лишь пиксель в моих глазах ...

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

Использование вертикального выравнивания не работает для меня, так что это просто упрощает его.

Answer 2

#search, .search-box a { vertical-align: middle; display: inline-block; }