Menu icon Foundation
How to center button in center tag?

Hi there! I am try using Foundation Email framework for creating my template. All be ok, but in Outlook 2016 i have some bug with button and border card block.

 

Can anybody knows how fix it?

Its my code:

<row>
  <columns large="4">
    <center>
      <div class="card">
        <img src="my_image.png" class="card-img">
        <div class="text-center card-name">Card title</div>
        <button href="#">Buy item ></button>
      </div>
    </center>
  </columns>
</row>

 

button outlook

Hi there! I am try using Foundation Email framework for creating my template. All be ok, but in Outlook 2016 i have some bug with button and border card block.

 

Can anybody knows how fix it?

Its my code:

<row>
  <columns large="4">
    <center>
      <div class="card">
        <img src="my_image.png" class="card-img">
        <div class="text-center card-name">Card title</div>
        <button href="#">Buy item ></button>
      </div>
    </center>
  </columns>
</row>

 

Rafi Benkual about 1 year ago

Wrap the button itself in the center tag as well.

 

Example https://foundation.zurb.com/emails/docs/alignment.html#centering-a-button

Bad Warlock about 1 year ago

Hi, Rafi! Thank you for reply. I wrap button to <p></p> tag, and the border has become better. But button aligned to right.

 

van phuc 12 months ago

helpful...i care