Make div size as per contents and horizontally center inside it's parent - css

Question

I have a div message which basically has a text and a link. I want its size to be changing based on the string inside it. Also I want this message div to be centered inside its container.
I have been playing with it for a while without much luck. Here is the link to JSfiddle: http://jsfiddle.net/pDYJ8/
Also I don't know how make that text and link appear one after other ( not on the new line )
Here is the code:
<div class="container">
<div class="message">
<p>do you want to </p>
<a href="somewhere" target="_blank">
buy this product
</a>
</div>
</div>
.container {
position: absolute;
background: #666;
top:25%;
width:100%;
font-size: 15px;
color: #e47911;
}
.message {
margin-right: auto;
margin-left: auto;
background: #ddd;
width:100px;
}
Tried display inline block to fit its content but then it wouldn't center it inside its parent.
Keeping width 100px for now just to mock my requirements

Answer 1

Just Tweak Some CSS
See the demo fiddle.
.container {
position: absolute;
background: #666;
top:25%;
width:100%;
font-size: 15px;
color: #e47911;
text-align: center; /*added*/
}
.container .message {
display: inline-block; /*added*/
text-align: left; /*added*/
background: #ddd;
}
.message p { /*added*/
display: inline-block;
}
Explanation
The text-align center causes the now inline-block display of .message to center, which is then reset to have its own text-align back at left (this is not necessary). To get the a on the same line, the p also needs to be some type of inline display, here I chose inline-block as well..

Answer 2

I think you are over complicating things. All you need is a text-align: centeron the container and a display: inline-block on the message:
.container {
background: #666;
font-size: 15px;
color: #e47911;
text-align: center;
}
.container .message {
background: #ddd;
display: inline-block;
}
http://jsfiddle.net/Pevara/pDYJ8/9/
The inline block makes the div act as a word inside text, and the text-align center makes the 'word' align to the center...

Answer 3

Here is a simplified approach to a couple of the answers given. It reduces the amount of HTML and CSS needed.
CSS
.container {
color: #e47911;
text-align: center;
}
.message {
display: inline;
background: #DDDDDD;
}
HTML
<div class="container">
<p class="message">
Do you want to buy this product?
</p>
</div>
I would definitely put your anchor tag, <a> inside the paragraph tag, <p>.
You could even remove display: inline; from .message if you made it a <span> rather than a <p>.

Answer 4

Check this out:
http://jsfiddle.net/pDYJ8/10/
Changes made to above link
.container .message {
margin: 0 auto;
width:auto;
}
span{
background: #ddd;
display:inline;
}

Answer 5

You can simplify it with display: table; and margin: 0 auto;
.container {
display: table;
margin: 0 auto;
background-color: #DDD;
}
<div class="container">
do you want to buy this product
</div>