Gesamt n00b Frage hier (zumindest für die CSS-Elite):
Warum scheint ein Element mit display: block; und einem Wert für width nicht mit der Eigenschaft text-align des übergeordneten Elements übereinzustimmen? Das heißt, es scheint immer darauf zu bestehen, links zu bleiben.
Hier ist ein jsFiddle, das das Problem veranschaulicht.
Offensichtlich muss dies mit der CSS-Spezifikation übereinstimmen (ich meine, wenn Chrome, Firefox und Opera darin einig sind, habe ich sehr wenig Zweifel); Ich verstehe es einfach nicht.
Der Text wird direkt in einer 150px-Box ausgerichtet. Das ist richtig. Ein Blockelement wird nicht an die Textausrichtung im übergeordneten Element ausgerichtet.
Um dies zu beheben, müssen Sie entweder display: inline-block oder float: right für das .width div.
edit: Fügen Sie mit float clear: right hinzu, um zu vermeiden, dass es in der gleichen Zeile wie das vorherige div ist
<span> ist ein Element mit display: inline . Elemente mit display: inline nach der Textausrichtung. Elemente mit display: block folgen nicht der Ausrichtung von Text, die vom Float auf OWNED ausgerichtet sind.
Wenn Sie nur die Breite des Elements ändern bleibt inline, nach der Ausrichtung von Text, aber wenn Sie Ihre Anzeige zu blockieren und ändern Sie die Breite ändern, nimmt der Inhalt die Ausrichtung von Text, aber das Element nicht. Ich habe versucht, dies mit etwas Farbe in Ihrem Code zu veranschaulichen;)
Tags und Links css layout text-alignment