Centering a table

[cvselman]

I have a home page deisgn which I've used tables for. I have the usual html align: center tag but its not working. I'm guessing its because html5 works differently. So I've also placed float: center but that doesn't work.

i don't have access to the whole of Magento and any CSS has to be local. the wysiwyg will display the table as centered but magento will not save the attribute.

What am I doing wrong?

[RebeccaBrocton]

Hi @cvselman,

If you can edit the table HTML you can use this old method: 

<table align="center">

Or using CSS:

To center a table, you need to set the margins, like this:

  table{
    margin-left:auto; 
    margin-right:auto;
  }

At this point, Mozilla and Opera will center your table. Internet Explorer 5.5 and up, however, needs you to add this to your CSS as well:

  body {text-align:center;}  

Rebecca 

P.s. float: center is not valid CSS. You can float left. You can float right. But you can't float center.

[cvselman]

Hi

I've added the [ table{etc.} ] and that makes it display correctly in Magento but not in the usual browsers.

Im not sure where to add the next line or if there should be a '.' before body [ body {text-align:center:}

Thanks for your help

[RebeccaBrocton]

Hi @cvselman,

Would it be possible for you to send a screenshot or (preferably) a link? 

Thank you, 

Rebecca

[cvselman]

Hi, 

The website I'm working on is www.vionicshoes.co.uk

The heder section is fine. It's from the 'More New Styles' downward I have a problem.  This is all in a table (still trying to get my head around HTML5) As you can see the table sit to the left.  I know in due course I have to get divs sorted in HTMl5 but for now, how do I make the table center.

Thanks you so much for help so far.

[RebeccaBrocton]

Hello, 

Ok so I have just had a play with your code and doing the following will fix your issue: 

Add the following within style="..." for all of your <table... tags:

margin-left: auto; margin-right: auto;

And remove the align:center as it is an attribute and not meant to be contained within style="" , also with this method it is not needed.

So for example your first <table... will be as below:

<table style="width: 900px; height: 117px; margin-left: auto;margin-right: auto;" border="0">

Any questions let me know.

Rebecca

p.s. please notice that the black box with the code snippet in scrolls to reveal the full <table... tag. E.g.

<table style="width: 900px; height: 117px; margin-left: auto;margin-right: auto;" border="0">

[RebeccaBrocton · Accepted solution]

Hi @cvselman,

I can see its now centered and looks much better! 

Is this issue now resolved? 

Rebecca