Satellite internet
Home page

Satsig logo
Misc index

Embedded YouTube video not working on iPad problem

Adding images into my YaBB forum

How favourite icon works

Acceleration software

How to center Facebook buttons in HTML5



I seemed to have lots of problems getting Facebook Like buttons to centre on the page.

I found that these examples both worked OK:


Centering Facebook button with a div

<div style="text-align: center; width: 100%;"
       class="fb-like"
       data-href="http://www.satsig.net/training/how-to-center-facebook-buttons.htm"
       data-layout="box_count"
       data-action="recommend"
       data-size="large"
       data-show-faces="true"
       data-share="true">
</div>

This is what it looks like:

 

Important:

Set text-align: center

Specify a width, for example. width: 100%;  or  width: 80%; etc.   If you leave out a width specification it does not work.  


Centering Facebook button using table cell

<table style="width: 100%; border: 2px solid purple;">
   <tr>
      <td style="width: 100%; border: 2px solid orange; text-align: center" >
          <div class="fb-like"
          data-href="http://www.satsig.net/training/how-to-center-facebook-buttons.htm"
          data-layout="box_count"
          data-action="recommend"
          data-size="large"
          data-show-faces="true"
          data-share="true">
          </div>
      </td>
   </tr>
</table>

This is what it looks like:

Important:

Use text-align: centre in the td


Any queries of contributions please e-mail me Eric Johnston

This page is copyright (c) 2018 Satellite Signals Ltd, All rights reserved

Page started 8 June 2018