CODEWITHSUNDEEP
htmlcssemail
Bernard Bravenboer
Bernard Bravenboer

Reputation: 21

Trying to center a header on a button but it keeps being *slightly off-center

I'm working with this body of code, and it presents the header on a button slightly towards the right. I can't figure out if there's a mistake in the padding? The code: 

<p style="margin:0;font-family:'montreal-mediumregular', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, 'Sans-Serif';color:rgb(70,82,118);font-size:18px;line-height:25px;padding:15px 0 0 0;text-align:center;">
          <br><a href="https://www.orderin.co.za/" style="color:#d3392c;font-size:18px;text-align:center;background:rgb(255,255,255);padding:10px;border:1px solid #d3392c;width:205px;margin:20px auto 20px;font-family:'montreal-demiboldregular', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, 'Sans-Serif';letter-spacing:2px;text-decoration:none;">
             ORDERIN NOW
        </a>
        <br>
        <br>
      </p>

Which displays like this (in the screenshot):

you can see it's slightly off-centre towards the right

Upvotes: 0

Views: 72

Answers (1)

Greg Schmit
Greg Schmit

Reputation: 4594

This should render the button without any weird spacing:

<p style="margin:0;font-family:'montreal-mediumregular', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, 'Sans-Serif';color:rgb(70,82,118);font-size:18px;line-height:25px;padding:15px 0 0 0;text-align:center;">
  <br>
  <a href="https://www.orderin.co.za/" style="color:#d3392c;font-size:18px;text-align:center;background:rgb(255,255,255);padding:10px;border:1px solid #d3392c;width:205px;margin:20px auto 20px;font-family:'montreal-demiboldregular', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, 'Sans-Serif';letter-spacing:2px;text-decoration:none;">ORDERIN NOW</a>
  <br>
  <br>
</p>

The text between tags (e.g., a tags) should not include trailing space on either end. Browsers handle it differently. On my machine, Firefox strips it all, while Safari and Chrome strip leading, but keep a single trailing space.

When I first pasted your code I got a visible "A with circumflex" character (0xc382) and I cannot replicate. Now when I copy/paste your code I get a space on the right (vs your image shows a space on the left).

Either way, the corrected HTML above should render normally (tested with Chrome/Firefox/Safari on MBP running High Sierra).

Upvotes: 1

Related Questions