Как выровнять по горизонтали кнопку пользовательского интерфейса jQuery для div?

Question

У меня есть следующие HTML структуры (эта структура важна для меня):

<div> 
    <div class="element"> 
     <div contenteditable="true" class="inputdiv"></div> 
    </div> 
    <div class="element" id="zbtn">OK</div> 
</div> 

и CSS:

.inputdiv { 
    width: 100px; 
    height: 16px; 
    overflow: hidden; 
    padding: 3px 3px 2px; 
    white-space: nowrap; 
    border: 1px solid #aaa; 
    border-radius: 2px; 
} 
.element { 
    font-size: 11px; 
    font-family: Helvetica,Arial; 
    display: inline-block; 
} 

создать простую кнопку JQuery UI из DIV (это тоже важно) :

$('#zbtn').button(); 

кнопка обычно выравниваются в Chrome, , но не в Firefox и IE.

Пожалуйста, смотрите это изображение:

и jsFiddle:

http://jsfiddle.net/Grigur/SPLLW/

Answer 1

Добавить vertical-align:middle в .element, обновленный скрипку http://jsfiddle.net/SPLLW/1/