css - Make centered DIV inside wide DIV expand with content width -


i'm using 2 divs, parent , child. parent has width of 100% , contents text-align'ed center.

the child div should have width of 0 (or close it) , expand width automatically contents, while still being centered in parent div. example:

+------------ parent div ------------+ |                                    | |          ..some content..          | |                                    | |           +--child div--+          | |           |inside child |          | |           +-------------+          | |                                    | +------------------------------------+  +------------ parent div ------------+ |                                    | |          ..some content..          | |                                    | |      +------ child div ------+     | |      |inside child more |     | |      +-----------------------+     | |                                    | +------------------------------------+ 

if put fixed width child div, can center correctly:

.parent {     width: 100%; } .child {     width: 100px;     margin-left: auto;     margin-right: auto; } 

but not need, need child div expand width according content. tried using float , nowrap:

.parent {     width: 100%; } .child {     float: left;     white-space: nowrap;     margin-left: auto;     margin-right: auto; } 

that works child itself, no longer centered content of parent.

i can solve using javascript, prefere not to.

i've been looking around similar questions in haven't find 1 answers situation exactly.

can please throw me light?

thanks in advance comments.

francisco

you can use display: inline-block; (not supported in < ie7) must enclose other content in block level element (like <p> or <div>)

.parent {     width: 100%;     text-align: center;         border: 1px solid #000; } .child {     display: inline-block;         border: 1px solid #f00; } 

http://jsfiddle.net/4kpsk/

(click red bordered div add more content , see solution in effect.)


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -