Question

这是一个包含三行的简单html表。我希望最后一行中的按钮在中心对齐，但它没有对齐。我可以看到向右的轻微移动但在该行的中心处并不完美。难道我做错了什么？谢谢你的帮助！

HTML

<div class="search">
    <form action="questions/${id}" method="GET">
        <table>
            <tr>
                <td>
                    <label for="question_id"> <u><b> Question: </b></u> 
                    </label>
                </td>
                <td>
                    <input type="text" name="lastname" value="Mouse">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="race_id"> <u><b> Race: </b></u> 
                    </label>
                </td>
                <td>
                    <select>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="Submit">
                </td>
            </tr>
        </table>
    </form>
</div>

CSS

.search table {
    border: thin solid;
    border-color: #D6D6C2;
}

.search table tr:last-child td {
    text-align: center;
}

Answer 1

只需指定colspan =＆＃34; 2＆＃34;对于td Sample：

   <td colspan="2">
    <input type="submit" value="Submit">
   </td>

Answer 2

添加：

<td align="center" colspan="3">
     <input type="submit" value="Submit">
</td>

Answer 3

您的表有2列。但是，该按钮仅在左列中。这就是你的按钮只与左列的中心对齐而不是与表格中心对齐的原因。

将最后一行的td的colspan设置为2会将单元格扩展为2列（以及表格的宽度）。现在td中的按钮将对齐到表格的中心。

<td colspan="2">
    <input type="submit" value="Submit" />
</td>

Answer 4

你应该使用COLSPAN = 2或colspan =＆＃34; 2＆＃34; 。

 <td colspan="2">
     <input type="submit" value="Submit">
 </td>

请参阅小提琴here。

这应该是完美的中心。

如果您想知道为什么您的代码无效：

基本上，包含您的按钮的<td>不会占据<tr>宽度的100％，请参阅此fiddle。

Answer 5

或者你也可以这样做。

.thirdRow
{
    text-align:center;
}

<tr> 
    <td colspan="2"> 
        <input class="thirdRow" type="submit" value="Submit">
    </td>
</tr>

将中心对齐表格中的td？

5 个答案: