html - 表 td 对齐问题？

Question

我正在尝试使按钮与文本框对齐，但我无法让它工作，如果您需要更多代码，我会很高兴发布它:)

这是我的代码：http: //jsfiddle.net/Hunter4854/FFcAu/

<table class="chatMain" width="100%" height="100%" cellpadding="10" cellspacing="0" border="0">

    <tr>

        <td align="center" class="MainView" valign="middle">1</td>

        <td align="center" valign="middle" class="SideAd" width="185px" rowspan="3">AD</td>

    </tr>

    <tr>

        <td align="center" class="controls" valign="middle">

            <textarea class="chatInput"></textarea>

            <button type="submit">Send</button>

        </td>                                   

    </tr>

</table>

Answer 1

尝试添加vertical-align: middle到表单元素本身。

表格单元格的整个内容（作为实体）在单元格内垂直对齐，而内容内每个内联元素的相互对齐是通过vertical-align这些内联元素而不是表格单元格指定的。

Answer 2

display: block将and添加float: left到您的.chatInput和button类中：

.chatInput
{
    display:block;
    float:left;
    width: 500px;
    font-size: 12pt;
    height: 75px;
    box-sizing: border-box;
    border: 1px solid #000;
    padding-left: 5px;
    padding-right: 5px;
    outline: none;
    resize:none;
}

button {
    display:block;
    float:left;
    height:75px;
}

小提琴：http: //jsfiddle.net/kboucher/xH8sm/