2010-08-23 4 views
1

У меня есть текстовое поле и кнопка, описанная ниже в 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; 
} 
+1

Я не могу получить доступ к вашей странице примера. Сообщение об ошибке: «Веб-сервер, к которому вы пытаетесь связаться, имеет список IP-адресов, которым не разрешен доступ к веб-сайту, а IP-адрес вашего браузера находится в этом списке» –

+0

@piquadrat - спасибо за указание на то, что , Я думаю, что SysAdmins настроили ip-фильтрацию на этом поле ... было бы удобно, если бы вы, ребята, могли это увидеть! – DaveDev

+0

@piquadrat - обновлен. Спасибо – DaveDev

ответ

0

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

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

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

+0

Это не будет выравниваться при изменении размера шрифта. –

+0

Использование em-измерений решает эту проблему. Пример обновлен и протестирован при различных текстовых масштабированиях в Firefox. – Fenton

+0

В каком браузере не выполнялось вертикальное выравнивание? Работает в FF и должен работать в IE 8. В этом случае вертикальное выравнивание, вероятно, не критично, поэтому я бы предположил, что это «достаточно хорошо». –

0
#search, .search-box a { vertical-align: middle; display: inline-block; } 
Смежные вопросы