1

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.

Milad Rashidi
  • 1,296
  • 4
  • 22
  • 40
Christian Smith
  • 13
  • 2
  • 1
    Possible duplicate of [How to horizontally center a
    in another
    ?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div)
     – Daxtron2 May 30 '18 at 17:16

2 Answers2

0

Set the parent element to display block and the button to margin-left and margin-right auto :)

Adrian Baginski
  • 336
  • 1
  • 8
0

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>
Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35