1

I have a table inside a div, like this: enter image description here
I need to centralize the table inside this div...
But my attemp to set the 'text-align:middle' fail, like this:enter image description here
Any ideas?

Julio Cesar Boaroli
  • 181
  • 2
  • 12
  • This is the Fiddle: https://jsfiddle.net/skkhgzx4/ – Julio Cesar Boaroli Oct 08 '15 at 20:23
  • @JulioCesarBoaroli Aw man, why did you select his as the correct answer, when mine was there first? You picked mine first, but then changed it to his, even though they are the same. He changed his based on my fact (read the first comment of Steyn's answer). Come on :( – MortenMoulder Oct 08 '15 at 21:31

5 Answers5

2
table {
    margin: 0 auto;
}

Will fix everything for you!

Steyn
  • 1,311
  • 8
  • 15
  • 2
    Better to do `0 auto` instead of `auto`: http://stackoverflow.com/a/8312397/2098652 – MortenMoulder Oct 08 '15 at 20:29
  • Works man, thank you! – Julio Cesar Boaroli Oct 08 '15 at 20:35
  • Could you explain why you do not have to set a `width` in order for this to work. – hungerstar Oct 08 '15 at 20:40
  • Take for example a paragraph of 500 characters. Without a defined width, it will just take up all the space it can, right? There is nothing to center, because the paragraph is 100% to it's parent. In this case, the table already has a pre-defined width (intentional or not). The input field and labels only take up as much space as they need, and will not fill to 100% of their parent. Hence, you won't need to set a (max)width. – Steyn Oct 08 '15 at 20:45
1

Simply add margin: 0 auto; to your table, and the whole table will be aligned in the middle of the div.

table {
    margin: 0 auto;
}

https://jsfiddle.net/skkhgzx4/5/

MortenMoulder
  • 6,138
  • 11
  • 60
  • 116
0

Did you try with CSS

#table{
margin: 0, auto;
display: block;}

Other approach:

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

Other approach set table into a new div. Set width of new div to 80% of the parent div. In CSS from the new div, set display: block and margin: 0, auto.

If everything fails, 

<center> table </center>

in HTML text will do the trick.

mdalmau
  • 81
  • 1
  • 8
0

just set display: inline-block; on table and on parent text-align: center;

CODEPEN

Szymon
  • 1,281
  • 1
  • 20
  • 36
-1

Set a fixed width for your table container div (cheque) and give it overflow:hidden and margin:0 auto;

    <div id="cheque" class="content" 
    style="
      overflow:hidden;
      margin:0 auto; 
      width:300px"> ...

Your updated fiddle: https://jsfiddle.net/skkhgzx4/3/

Victor Levin
  • 1,167
  • 6
  • 11
  • Suggesting inline CSS is bad, but it's even worse when the CSS is just wrong. – Steyn Oct 08 '15 at 20:29
  • Come on, he's got inline CSS all over the place. I'm trying to fix the propblem not to teach proper coding practices. – Victor Levin Oct 08 '15 at 20:31
  • When in this situation, you can show him the quick fix, like what you've done, explain why its bad and then show him the proper way to do it and advise him to follow your better approach. Just edit your answer if need be. – Dan Beaulieu Oct 08 '15 at 22:56