CODEWITHSUNDEEP
htmlcssalignmentvertical-alignment
Mark Roworth
Mark Roworth

Reputation: 566

HTML CSS Centering paypal button in a td in a hidden form

I'm writing a payment page to make a payment from Paypal using Instant Payment Notification. This process is kicked off by POSTing to Paypal using a submit button and a bunch of hidden form fields. As per layout, I have a table and in one of the tds is the form. The HTML looks like this:

<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 style="width:0" 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="[email protected]" />
            <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>

There is nothing in my CSS file that sets the alignment for td without the use of a class.

The problem I have is that the paypal button is in the top-left of the td, and I'd like it aligned in the centre/middle. My guess is that this is because it is just one input item in a form. How do I achieve this?

Upvotes: 0

Views: 234

Answers (1)

yH20
yH20

Reputation: 56

The reason is because you set the form style: width:0 so the td width is also 0; therefore, the image is overflowing and aligned at the left (default alignment for ltr layouts). I'm not sure why you set the form width to 0 but if you remove it, your image will be center-aligned.

Upvotes: 0

Related Questions