Centering a table in CSS isn't Working

Question

I'm using BlueGriffon and reading the following links:

about how to center a table using CSS, as align has been deprecated. However, none of them are working, the code suggested in the 3 links to center a table looks like this:

.centered-table {
     margin-left: auto; 
     margin-right: auto%; 
}

My code:

CSS:

.maintbl {
  margin-left: auto; 
  margin-right: auto%; 
}

HTML:

 <table class="maintbl" id="tblMain">
  <tbody>
    <tr>
      <td>Hello world<br>
      </td>
    </tr>
  </tbody>
</table>

Instead of centering, it appears on the right side. I copied the code from the last link directly into the editor, and the result was the same. What wrong and how do I fix it?

`margin-right: auto%;` isn't valid. You can specify auto *or* a percentage, but not together. https://jsfiddle.net/8wherLxu/ — j08691, Oct 29 '16 at 14:06
@j08691 - Nevermind, I figured out what the problem was. Error on my part. Thanks! — AnnabelleRosemond, Oct 29 '16 at 14:09
@j08691 - What you said the auto% isn't valid. When I looked at my code again, the % for left isn't there, and a re-check of the last link verified that the % isn't there in the code. It's just auto and ; no percent. — AnnabelleRosemond, Oct 29 '16 at 14:11
`auto%` is a completely invalid value, so I'm not sure why you think it's valid. The browser may be correcting it for you, but on it's own it's not valid. — j08691, Oct 29 '16 at 14:12
@j08691 - Sure do. It was a silly mistake on my part. Either percent or auto; but not a combination. — AnnabelleRosemond, Oct 29 '16 at 14:19
Check this link: https://stackoverflow.com/questions/41721586/how-do-i-responsively-center-text-inside-of-a-div/41721874#41721874. Maybe it helps. — Kenzo_Gilead, Jun 02 '17 at 11:59

score 0 · Answer 1 · answered Jun 02 '17 at 11:58

0

I think its better practice for table center. just use css on the table tag

example.

 table {
        width: 60%;
        margin: 0 auto;
    }

answered Jun 02 '17 at 11:58

Musarrof

39
9

Centering a table in CSS isn't Working

1 Answers1