css - child div own auto width to center it in parent div

Question

I have a content div, which has a paragraph_content div inside with paragraphs in it.

The content div is 1000px wide. Now the paragraph_content automatically applies the 1000px width of the content. So I can never center it with margin: 0 auto, so the text in the paragraphs get centered. Now I could do text-align: center, but then the lines doesn't show under eachother since some lines are shorter and all is centered.

I want it centered, and all text lines placed right under eachother instead of some jumping in later.

And I want it centered so that if the text get adjusted it doesn't just expand it on the right side, but that the left and the right side auto expand so all stays centered.

what I have:

#content{
    width: 1000px;
    float: left;
    overflow: hidden;
}

#paragraph_content{
    display: block;
    padding: 0;
    margin:0 auto;
    overflow: hidden;
}

#paragraph_content p{
    float: left;
    font-family: Lucida Console;
    font-size: 12px;
    padding: 5px;
}

http://jsfiddle.net/cUx2k/

I have put borders to show the space of the content and child div. the paragraphs are taking all of the space on the right for example as is the child div. So I cant never center it in the content div.

Answer 1

私はそれを修正しました：

#paragraph_content{
    display: table;
    margin: 0 auto;
}