Im Folgenden möchte ich das CSS so ändern, dass right-sibling wirklich im container div zentriert ist. (Bearbeiten: ohne absolute Positionierung).
In der aktuellen Implementierung wird die Zentrierung des rechten Geschwisters vom linken Geschwister beeinflusst - Sie können dies sehen, indem Sie display: none zum Stil left-sibling hinzufügen.
(Hinweis: Ich möchte vermeiden, die HTML-Struktur zu ändern, weil, wie ich es verstehe, der ganze Sinn von CSS darin besteht, die Tag-Struktur von der Präsentationslogik zu entkoppeln, und dies scheint keine wirklich verrückte Anfrage zu sein für CSS zu handhaben.)
TIA.
Ein Trick, den ich gerade benutzt habe, ist das Auffüllen der linken Seite des Containers, und wir können die linke Schwester dazu ermutigen, innerhalb dieses Raumes zu sitzen, indem wir ihr einen gleichen, aber negativen Rand geben.
Um das Bild zu vervollständigen, setzen wir auch auf der rechten Seite des Containers eine Füllung gleicher Größe auf die Breite des linken Geschwisters.
%Vor%Sie sollten immer eine Breite auf floated Elemente setzen, sonst werden die Dinge komisch:)
Wenn Sie ein
setzen %Vor%Regel auf beiden divs Sie sehen, was passiert - die # rechts Geschwister div füllt die gesamte Breite des Elternteils div (#container), also obwohl der Text ist tatsächlich an der Mitte ausgerichtet Es sieht so aus als wäre es nicht!
Das Attribut text-align steuert die Ausrichtung der Inhalte in dem Container, in dem das Attribut angewendet wird. Durch Hinzufügen der folgenden Stile ist es einfach zu sehen:
%Vor%Ich würde vorschlagen, dem Dokument einen Doctype hinzuzufügen, um den quirksmode zu vermeiden
%Vor%und die folgenden Stile:
%Vor%Sie möchten natürlich die Größe der Geschwister an Ihre Bedürfnisse anpassen. Die Grenzen machen einen netten Job und zeigen, was wirklich passiert.