css inline-block with aligned center

Question

I want a div that have same width as content which is done by display: inline-block;
but when I use this,text-align: center not working anymore.
so my content just go left and inline-block apply to it.
like this:

#div1 {
position: relative;
bottom: 10px;
left: auto;
text-decoration: overline underline;
display: inline;
text-align: center;
}

it doesn't center the text of div anymore.
how I can get both effects of this two?

Answer 1

Give the property text-align:center to any other element, and use that element inside your div.

eg.

#div1 {
position: relative;
bottom: 10px;
left: auto;
text-decoration: overline underline;
display: inline;
}
#p1 {
text-align: center;
}

and then

<div id="div1">
        <p id="p1">blah blah blah</p>
</div>

That should work.