在HTML中将按钮居中（水平对齐）

Question

我正在尝试将电子邮件模板上的按钮居中（水平对齐）。 这是我当前的代码：

 <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> 

我知道这是一个业余问题，对不起，我已经尝试了上百万次并且没有任何工作。

Answer 1

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

Answer 2

删除了不必要的样式（宽度：60％；显示：inline-block;），并添加了样式来使按钮居中（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>