How to make css layout to fit html content?

Question

I have a layout similar to:

 <div>
    <table>
    </table>
</div>

I would like for the div to only expand to as wide as my table becomes. My CSS:

.content {
    text-align: center;
    height: auto;
    width: auto;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    border: #solid 10px #000;
    background-color: rgba(105,100,100,0.8);
          }

I've tried adding display: inline-block it works but it sets my table to the left of the scree, here's the screenshot: image I want it to be centered as well, how do I do that?

possible duplicate of [div with display:inline-block margin 0 auto not center](http://stackoverflow.com/questions/9313276/div-with-displayinline-block-margin-0-auto-not-center) — sodawillow, Jan 07 '15 at 10:35
@sodawillow how do I accept your answer? sorry I'm still new in stackoverflow :) — Squidward, Jan 07 '15 at 11:11

sodawillow · Accepted Answer · 2015-01-07T10:44:24.837

0

Add text-align: center to your body (provided the div is a direct child of your body tag)

body
{
    text-align: center;
}

(in your CSS stylesheet)

edited Jan 07 '15 at 10:44

answered Jan 07 '15 at 10:35

sodawillow

11,431
4
34
43

do you mean like this `
` ? I tried that but didn't work, it stays the same, no changes at all – Squidward Jan 07 '15 at 10:39

score 0 · Answer 2 · answered Jan 07 '15 at 10:36

0

You could work with translate here.

.content{
    left: 50%;
    transform: translateX(-50%);
}

answered Jan 07 '15 at 10:36

Frederik Witte

1,067
2
9
34

score 0 · Answer 3 · answered Jan 07 '15 at 10:45

0

Add text-align: center to parent element of div with display:inline-block

answered Jan 07 '15 at 10:45

Michał Kutra

1,202
8
20

How to make css layout to fit html content?

3 Answers3