어떻게이 두 요소를 정렬 할 수 있습니까?

Question

아래에는 HTML/CSS로 설명하는 텍스트 상자와 버튼이 있습니다.

현재이 두 요소는 텍스트 상자보다 약간 낮은 버튼으로 표시됩니다. 누군가가 어떻게이 두 줄을 정렬하여 같은 가로축에 놓을 수 있는지 제안 해 줄 수 있습니까? 감사합니다

업데이트 : 외부 세계는 분명히이 사이트를 볼 수 없습니다.이 코드입니다 : 내가 업데이 트를

곧 2 컨트롤을 설명하는 몇 가지 HTML을 게시합니다

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

세로 정렬을 사용하면 나를 위해 작동하지 않으므로 그냥 shims.

Answer 2

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