Question

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

＆＃13;

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

＆＃13;

我知道这是一个业余问题而且我道歉，我已经尝试了一百万件事并且没有任何工作可做。

Answer 1

将父元素设置为显示块，将按钮设置为margin-left和margin-right auto：）

Answer 2

删除不必要的样式（宽度：60％;显示：内联块;），并添加样式以使按钮居中（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>

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

2 个答案: