<div>-Layer in CSS zentrieren [4]

Noch ein Problem-Variante bzw. ein Detail, welches hier noch nicht beachtet wurde:

(Im folgenden sollen die Klassen-Namen die Bedeutungen der Elemente beschreiben...)

<div class="äußerer Rahmen" style="text-align: center">

<div class="positionier-rahmen" style="position:relative; margin: auto; width: auto">

<div class="basis-layer mit bild"><img src="irgendwas"></div>
<div class="overlay-layer" style="position:absolute; top: irgendwo; left: irgendwo"><img src="irgendein icon"/></div>

</div>

</div>

Hier möchte ich nun, daß der "positionier-rahmen" samt Inhalt im übergeordneten Container ("äußerer Rahmen") zentriert wird.

Das ist - wie es aussieht - unmöglich bei Anwendung aller hier soweit diskutierten Regeln (namentlich unter Verwendung von "margin: auto" und "text-align: center").

Wenn wir uns mal den Spaß machen, alles mit verschiedenfarbigen borders auszustatten, sehen wir nämlich, daß die "margin" überhaupt nicht vergeben wird: Der Container "positionier-rahmen" behält hartnäckig sein Null-Margins und sein 100% width bei.

Nur genau solche Elemente, die INNERHALB dieses Containers liegen und außerdem vom INLINE-Typ sind, ERSCHEINEN so, als ob sie korrekt mittig positioniert wären - weil sie offenbar die beiden Attribute "margin: auto" und "text-align: center" von den übergeordneten Ebenen erben.
DAS hat aber nichts mit dem Sinn des Attributs "margin" für das Element, AN DEM es definiert wird, zu tun.
Und leider auch nichts mit dem Sinn seiner Anwendung hier...

Also: Wenn man FÜR ein Element eine "margin" definiert, sollte man doch annehmen können, daß eben die "margin" DIESES Elements beeinflußt wird, oder? - Wobei der Fakt, daß die margin auf innere Elemente vererbt wird und diese dann gegebenenfalls zentriert erscheinen, mir vollkommen Schnuppe ist: Ich will nämlich, daß das "irgendein icon", welches in Bezug auf den nächst übergeordneten Layer mit "position" ungleich "static" bezogen positioniert wird, denselben Bezugspunkt wie das "irgendwas"-Bild hat.

Was bisher nicht gelingt.

DAS ändert sich, und zwar GENAU DANN, wenn die margins des "positionier-rahmen" NICHT MEHR "auto" sind, sondern IRGENDETWAS definiertes ODER wenn die "width" dieses Containers absolut vorgegeben wird.

DANN hat der Container "positionier-rahmen" plötzlich margins...

DAS aber wiederum stößt sich damit, daß ich vermeiden möchte, die Breite des inneren Bildes "irgendwas" korrekt angeben zu müssen.

Bzw. um etwas genauer zu sein: Ich möchte, daß die Leute, die die Vorlage anwenden und deren IQ zwar zum unerlaubten Installieren von Ballerspielen, nicht aber zum füllerfreien Aufbrechen eines Satzes in deutscher Sprache ausreicht, nicht gezwungen sind, die korrekte Breite jenes Bildes vorzugeben. (Oder um noch genauer zu sein: Meine Chefs möchten, daß ich jenen Leuten ermögliche, zu dumm dafür zu sein, und die Leute haben bisher tatsächlich bewiesen, daß sowas wie ne Bildbreite korrekt einzustellen für sie ungefähr das Niveau einer Doktorarbeit haben würde...)


Gibt es eine Idee, wie unter diesen Umständen korrektes Zentrieren erreicht werden kann?

Ach ja: Mit der Tabelle hat sich das Problem natürlich erstmal für mich erledigt.

Allerdings begegne ich immer wieder Leuten, die behaupten, man könne ganz auf Tabellen verzichten, während mir im Alltag immer wieder Dinge begegnen, die sich auf keinen Fall mit dem derzeitigen CSS2 erledigen lassen, mit Tabellen aber "schon immer" gingen.

Meine Frage in diesem Sinne bleibt also: KANN man hier die Tabelle (unter Einhaltung der Vorgaben meines Geldtranspirators) ersetzen?

display:inline-block gibt es in Firefox schon, aber leider nur als propietäre Eigenschaft display: -moz-inline-box;
Auch wenn propietäres CSS (egal ob von MS oder Mozilla) bäh bäh ist, bietet Mozilla dieses wenigstens klar ausgezeichnet durch Prefixing - und viele dieser Extensions werden voraussichtlich in künftigen CSS-Versionen, klarerweise unter anderem Namen, zum Standard werden (wie z.B. auch die rounded corners, Teil der CSS3-Spezifikation).
In diesem konkreten Fall hier sehe ich das so: Opera und IE haben inline-block, dann macht es nicht viel aus, für den Firefox vorerst -moz-inline-box zu verwenden. Der Fx3 kommt bestimmt :)

Edit:

Zitat von Jörg

Und beim IE muss man wohl auch noch warten...

Ich glaube IE hat das schon, sogar allen voraus:

... this is provided by the CSS 2.0 inline-table or the CSS 2.1 inline-block display values. One or both is/are supported by IE5.5+, Opera5+, iCab and KHTML browsers (Safari, Konqueror). MS Internet Explorer first introduced inline-block as a proprietary extension in IE5.5.

Quelle

vergesst nicht mittels universalselektor, die browsereigene CSS auszuschalten!

* {margin: 0px; padding: 0px; border: 0px}

Ich ich hab ein Problem ich versuche Container mittig zu zentrieren so dass wenn man den Browser breiter oder schmaller macht zentriert bleibt bei den Header ist das der flaa aber bei den anderen nicht

Den Satz habe ich nicht ganz verstanden?

Dem Codebeispiel zufolge möchtest du aber wohl erreichen, dass neben dem Header auch die anderen Seitenelemente zentriert werden?

Dazu musst du dem äußeren Container eine feste Breite geben:

<body>
<div style="margin:auto; width:980px">
<div id="divHeader"><h1>Herzlich Willkommen</h1></div>