如何将按钮对齐/放置在两个文本区域之间的空间中？

Question

如何将按钮对齐/放置在两个文本区域之间的空间中？我想把按钮放到两个文本区域之间的中心空间，我该怎么办呢？

    <textarea name="Input" id="styleid">
    TEXT
    </textarea>
    <input type="submit" class="styled-button-2" value="Button" name="query" />
    <textarea name="Output" id="styleid" text="" disabled>
    TEXT
    </textarea> 

此代码将按钮输出到两个文本区域的中心，但它位于底部

Answer 1

使用vertical-align将它们垂直居中：

textarea, input {
    vertical-align: middle;
}

textarea, input {
  vertical-align: middle;
}

<textarea name="Input" id="styleid">
  TEXT
</textarea>
<input type="submit" class="styled-button-2" value="Button" name="query" />
<textarea name="Output" id="styleid" text="" disabled>
  TEXT
</textarea>