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; }
(click red bordered div add more content , see solution in effect.)