在 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

删除了不必要的样式(宽度：60%;显示：内联块;(，并添加了样式以使按钮居中(文本对齐：居中;(。

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

Answer 2

将父元素设置为显示块，将按钮设置为左边距和右边距自动:)