How to center my embed table

• 

  mohdalmie · Member · Jul 13, 2019 at 4:10 am

  • Copy link
  • Add topic to favorites

  Hi. I am new to the html codes, but I have been trying to center my table with the page width, but everything just didn’t work. My code is

  [googleapps domain="docs" dir="spreadsheets/d/e/2PACX-1vSg8nauWWoT4tmj6dJGM1UARLifrj7f-vCbCiymzyqZtDWfj7qsDrBHNCoPmkMjDDZ1c8JT55znCa_8/pubhtml" query="gid=0&single=false&range=B2:D5& align=middle& widget=false&headers=false&chrome=false" width="491" height="98" /]

  The blog I need help with is: (visible only to logged in users)

• 

  mohdalmie · Member · Jul 13, 2019 at 4:12 am

  • Copy link

  Sorry. I tried this one too:

  [googleapps domain="docs" dir="spreadsheets/d/e/2PACX-1vSg8nauWWoT4tmj6dJGM1UARLifrj7f-vCbCiymzyqZtDWfj7qsDrBHNCoPmkMjDDZ1c8JT55znCa_8/pubhtml" query="gid=0&single=false&range=B2:D5& align=middle& widget=false&headers=false&chrome=false" width="491" height="98" /]

• 

  studiozandra · Member · Jul 13, 2019 at 4:37 am

  • Copy link

  May I ask which page exactly are you needing help with? Is it this Google Form which you are trying to centerhttps://cntda2019.wordpress.com/registration-form/ ?

• 

  mohdalmie · Member · Jul 13, 2019 at 5:07 am

  • Copy link

  Sorry. It is the table in here https://cntda2019.wordpress.com/fees-payment-method/

  My code is

  <center>[googleapps domain="docs" dir="spreadsheets/d/e/2PACX-1vSg8nauWWoT4tmj6dJGM1UARLifrj7f-vCbCiymzyqZtDWfj7qsDrBHNCoPmkMjDDZ1c8JT55znCa_8/pubhtml" query="gid=0&single=false&range=B2:D5&widget=false&headers=false&chrome=false" width="491" height="98" /]</center>

  I got another table in here https://cntda2019.wordpress.com/tentative/ which I think is the same case.

  Thanks very much for your reply studiozandra

• 

  mohdalmie · Member · Jul 13, 2019 at 5:07 am

  • Copy link

  Sorry. It is the table in here https://cntda2019.wordpress.com/fees-payment-method/

  My code is

  <center>[googleapps domain="docs" dir="spreadsheets/d/e/2PACX-1vSg8nauWWoT4tmj6dJGM1UARLifrj7f-vCbCiymzyqZtDWfj7qsDrBHNCoPmkMjDDZ1c8JT55znCa_8/pubhtml" query="gid=0&single=false&range=B2:D5&widget=false&headers=false&chrome=false" width="491" height="98" /]</center>

  I got another table in here https://cntda2019.wordpress.com/tentative/ which I think is the same case.

  Thanks very much for your reply studiozandra

• 

  studiozandra · Member · Jul 15, 2019 at 10:39 pm

  • Copy link

  Apologies for the delayed response, I took the weekend off!

  The HTML center tag is a bit outdated (has been deprecated).

  Please see this page https://en.support.wordpress.com/custom-design/editing-css/
  on how to open your Customizer controls.
  I believe you should find and disable/remove “display block” rule:

  embed, iframe, object, audio, video {
  /* display: block; */
  margin-bottom: 1.6em;
  max-width: 100%;
  text-align: center;
  }

  Best,
  Zandra

• 

  mohdalmie · Member · Jul 16, 2019 at 1:46 am

  • Copy link

  Hi Zandra, thanks for your reply. That’s fine.
  Anyway, I am using a free wordpress, so I can’t edit the CSS.

• 

  studiozandra · Member · Jul 17, 2019 at 2:57 am

  • Copy link

  If I may say so, it looks great the way it is currently!

  In case you outgrow the free plan, see upgrade options here: https://wordpress.com/pricing/

  Best wishes with your site.

• 

  mohdalmie · Member · Jul 17, 2019 at 3:29 am

  • Copy link

  Hi Zandra, thanks very much!

• 

  torres126 · Member · Jul 17, 2019 at 6:49 pm

  • Copy link

  Hi @mohdalmie, you shouldn’t need to purchase a CSS upgrade to solve this issue. With the code editor, you can paste the following so that the table is centred:

  
  [googleapps domain="docs" dir="spreadsheets/d/e/2PACX-1vSg8nauWWoT4tmj6dJGM1UARLifrj7f-vCbCiymzyqZtDWfj7qsDrBHNCoPmkMjDDZ1c8JT55znCa_8/pubhtml" query="gid=0&single=false&range=B2:D5&widget=false&headers=false&chrome=false" width="491" height="98" /]
  
  

  Essentially, it’s better to replace <center> with <div style="display: flex; justify-content: center">. Let me know if that works for you! :)

• 

  torres126 · Member · Jul 17, 2019 at 6:50 pm

  • Copy link

  Ah, that formatting messed up, apologies. You can copy the code in the “HTML” column here instead: https://codepen.io/anon/pen/WVePNz

• 

  studiozandra · Member · Jul 17, 2019 at 9:28 pm

  • Copy link

  Thanks @Torres126 , that sure worked in my browser! @mohdalmie , I hope you try this fix.