Horizontally Centre a Custom Liquid Button in a Container using Custom CSS or alter HTML code

Topic summary

Goal: Horizontally center a custom PayFast “Subscribe” button on a webpage using either CSS or by adjusting HTML.

Context: The poster shared the full PayFast form markup, including multiple hidden inputs and a table wrapping the button. The button is an input type=“image” inside a , but it still isn’t centered as desired.

Request: Guidance on specific CSS (custom section) or HTML changes to reliably center the button within its container. The poster followed up noting multiple unsuccessful attempts and is seeking assistance.

Technical notes: CSS (Cascading Style Sheets) controls layout and styling; HTML is the page’s markup structure. The form uses a table and an image-type input for the button, with alignment applied via the table cell.

Artifacts: The code snippet is central to understanding the issue (form structure and current alignment approach).

Status: No solutions or responses yet; the question remains open with no resolution or concrete actions taken.

Summarized with AI on December 28. AI used: gpt-5.

Good day,

I have the following custom liquid button:

I have been trying for days to read previous posts on how to horizontally center this button on my page without success?

Can someone please help me to either update the HTML code or use CSS custom section to center the button horizontally on my page?

Kind Regards,

Charne

Is there anyone who can please assist me with this. I have tried so many variations and I am not getting it right?