Center a button (align horizontally) in HTML

Question

I'm trying to center (align horizontally) a button on my email template. Here is my current code:

 <p class="product-link" style="text-align:left; width:60%; display:inline-block; vertical-align:middle;"> <span> <a style="color:#000000; background:#F4D079; padding:10px 15px; display:inline-block; margin-bottom:10px; text-decoration:none; border-radius:5px; font-size:14px;" href="https://www.amazon.com/review/review-your-purchases/ref=?_encoding=UTF8&amp;asins=[[PRODUCT_ASIN]]">Share your opinion</a> </span> <br> </p> 

I know this is an amateur question and I apologize, I've tried a million things and haven't gotten anything to work.

Answer 1

将父元素设置为显示块，并将按钮设置为margin-left和margin-right auto :)

Answer 2

Removed unnecessary styles (width:60%; display:inline-block;),and added style to center the button(text-align: center;).

 <p class="product-link" style="text-align: center;vertical-align:middle;"> <span><a style="color:#000000; background:#F4D079; padding:10px 15px; display:inline-block; margin-bottom:10px; text-decoration:none; border-radius:5px; font-size:14px;" href="https://www.amazon.com/review/review-your-purchases/ref=?_encoding=UTF8&amp;asins=[[PRODUCT_ASIN]]">Share your opinion</a></span><br> <script type="text/javascript"> </script> </p>