How to align button by vertically in div using JQuery/CSS?
<p>There is the following code:</p>

<h3>HTML:</h3>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td class="first_column"&gt;Sign in&lt;/td&gt;
        &lt;td class="second_column"&gt;-&gt;(1)&lt;/td&gt;
        &lt;td class="third_column"&gt;&lt;div class="translated"&gt;Some text&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<h3>JS:</h3>

<pre><code>$(".translated").mouseenter(function(){
    if ($(this).hasClass("editable")){
        return;
    }
    var h=$(this).height();
    var w=$(this).width();
    $(this).empty();
    var field = $("&lt;input/&gt;", {
            type: "text",
            value:$(this).text()
        }).appendTo(this);
    var button = $("&lt;button&gt;&lt;/button&gt;").appendTo(this);
    field.height(h - field.outerHeight()+field.height());
    button.height(h-button.outerHeight()+button.height());
    $(this).height(h);
    $(this).width(w);
    $(this).addClass("editable");
});
</code></pre>

<h3>CSS:</h3>

<pre><code>.translated
{
    color:green;
    font-weight:bold;
    vertical-align:middle;
    width:100%;
}
</code></pre>

<p>This code addes input and button items to div container when mouse focuses the div. But there is the following problem - button has got a good height, but incorrect align. I need that a new button item is in center of row by vertically. Please, tell me, how can I do it?</p>
