Make zentriert DIV innerhalb breiter DIV mit Inhalt Breite erweitern

Question

Ich benutze 2 divs, ein Elternteil und ein Kind. Der Elternteil hat eine Breite von 100% und sein Inhalt ist Text-ausgerichtet an die Mitte.

Das untergeordnete div sollte eine Breite von null (oder etwas in der Nähe davon) haben und seine Breite automatisch mit seinem Inhalt erweitern, während es immer noch im übergeordneten div zentriert ist. Beispiel:

+------------ PARENT DIV ------------+ 
|         | 
|   ..some content..   | 
|         | 
|   +--CHILD DIV--+   | 
|   |Inside child |   | 
|   +-------------+   | 
|         | 
+------------------------------------+ 

+------------ PARENT DIV ------------+ 
|         | 
|   ..some content..   | 
|         | 
|  +------ CHILD DIV ------+  | 
|  |Inside child with more |  | 
|  +-----------------------+  | 
|         | 
+------------------------------------+ 

Wenn ich eine feste Breite für das Kind div setzen, ich kann es richtig zentriert:

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

Aber das ist nicht das, was ich brauche, ich brauche das Kind div seine Breite zu erweitern nach seinem Inhalt. Also habe ich versucht, mit float und nowrap:

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

, die für das Kind arbeitet selbst, aber dann ist es nicht mehr als Inhalt des Stammes zentriert.

Ich kann es mit Javascript lösen, aber ich bevorzuge es wirklich nicht.

Ich habe mich nach ähnlichen Fragen in SO umgeschaut, aber ich habe keine gefunden, die diese Situation genau beantworten.

Kann mir bitte jemand ein Licht geben?

Vielen Dank im Voraus für Kommentare.

Francisco

Answer 1

können Sie verwenden display: inline-block; (nicht in < IE7 unterstützt), aber Sie müssen alle anderen Inhalte in einem anderen Block-Level-Element umschließen (wie ein <p> oder einem anderen <div>)

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

http://jsfiddle.net/4kpsK/

(Klicken Sie auf die rot umrandet div um mehr Inhalt hinzuzufügen und die Lösung in der Wirkung zu sehen.)

Answer 2

Sie haben Ihr Kind machen inline:

.parent { 
    width: 100%; 
    text-align: center; 
} 
.child { 
    display: inline; 
} 

See Fiddle hier: http://jsfiddle.net/4wXTd/1/

Answer 3

Ich denke, dass statt width Sie max-width und display:inline verwenden können. Aber das hat Nachteile: max-width wird nicht richtig interpretiert in IE (< 9 zumindest, denke ich), aber in Webkit/Moz/Opera Browsern sollten Sie sicher sein.

Answer 4

.child{display:block; margin: auto;} 

Sollte funktionieren.