中心将div与内联块显示对齐

Question

aligning a div that has width is very simple just setting left and right margin to auto will do the trick:

<div style="margin:0px auto;"> 

but in most cases as the content is dynamic, I can't set a width do the div, using the inline-block has the desired result for div's width but the center aligning doesn't work. anybody have any Idea how to center a div that its width is defined by its content width?

by the way, I want to know if it is possible to do such thing with css, not with jQuery or javascript.

Answer 1

<div style="text-align: center;">
    <div style="display: inline-block; background: yellow">Hello World</div>
</div>

• Check the jsFiddle demo .

Answer 2

Give parent element text-align: center

For more info on text-align go through this link

Answer 3

You can shrink wrap the contents with the varying width. You need two containing elements to do this, like so:

.outer-wrapper {
   float: right;
   position: relative;
   left: -50%;
}

.inner-wrapper {
   position: relative;
   left: 50%;
}

http://jsfiddle.net/ExplosionPIlls/te4es/