www.satsig.net
Home page

Misc index

Embedded YouTube video not working on iPad problem

Adding images into my YaBB forum

Seconds, Minutes, Hours, Days calculator

Flight navigation computer

How favourite icon works

How to use GIMP

How to renew letsencrypt certificates

WG111.v3 driver for Windows 10

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

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%;">
   <tr>
      <td style="width: 100%; border: 2px solid orange; text-align: center" >
          <div class="fb-like"
          data-href="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>

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, amended 21 Feb 2024