Tuesday, January 13, 2015

Center div with table content and fit to content

style="border: 1px solid black; display: table; padding: 0px 25px 25px 25px; margin-left: auto; margin-right: auto;"

The trick for me is the "display: table" portion which seems new to me but did exactly what I wanted it to do. I wanted a div containing a table to be centered into the middle of the page.

Without the display parameter, the div defaults to the full width of its parent container which then obviously would not have margins to auto-fill. Floating the div would only keep it to the left (obviously but still had to try). The stackoverflow articles also contained some other alternatives but this one seemed cleanest for what I needed.


Reference
http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents
http://stackoverflow.com/questions/19620051/how-do-i-let-width-of-table-determine-width-of-entire-page