HTML CSS如何实现td内隐藏表单的PayPal按钮居中对齐

问题核心原因 #

你的代码存在两处错误导致td的对齐规则失效：

1. form标签错误自闭合：你写了<form ... />的自闭合写法，浏览器会识别为form标签直接结束，后面的PayPal按钮和所有隐藏字段都会被解析为form标签外的元素，不受form的布局约束。
2. form设置了style="width:0"，宽度为0的容器无法正确承载内部元素，也会导致对齐规则无法作用到内部元素。

修复方案 #

1. 修正form标签的语法错误，删除form开头的自闭合斜线，同时移除width:0的错误样式
2. 保留td原有vertical-align: middle; text-align: center;的对齐规则，即可实现PayPal按钮的水平垂直居中，无需额外复杂样式。

修复后的完整代码如下：

<table>
    ...
    <tr id="paymentRow"> <!-- shows the paypal payment information -->
        <td valign="top">
            <div style="min-height:50px;">
                <br/>
                <descriptive>&nbsp;Payment</descriptive>
            </div>
        </td>
        <td style="vertical-align:middle; text-align:center;" >
            <!-- 修正了form的自闭合错误和width:0错误样式 -->
            <form action="https://ipnpb.sandbox.paypal.com/cgi-bin/webscr" onsubmit="return validate_payment_form(this)" method="post">
                <input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/checkout-logo-large.png" title="Check out with PayPal" alt="Submit" name="Submit" id="Submit"/>
                <input type="hidden" name="cmd" value="_xclick" />
                <input type="hidden" name="business" value="bob@bob.com" />
                <input type="hidden" name="item_name" value="Test purchase item|CustomerID|1" />
                <input type="hidden" name="no_shipping" value="1" />
                <input type="hidden" name="return" value="https://mywebsite/paymentReceived.php" />
                <input type="hidden" name="no_note" value="1" />
                <input type="hidden" name="currency_code" value="GBP" />
                <input type="hidden" name="amount" id="amount" value="1.00" />
                <input type="hidden" name="logged_in" value="" />
                <input type="hidden" name="<custom>" value="15" />
                <input type="hidden" name="notify_url" value="https://mywebsite/paypalNotification.php" /><br />
            </form>
        </td>
    </tr>
    ...
</table>

如果修复后仍有对齐偏差，可以在CSS中添加以下可选补充规则：

#paymentRow form {
    display: inline-block;
    margin: 0;
    padding: 0;
}

内容的提问来源于stack exchange，提问作者Mark Roworth