Frage zu <span>

[lachesis]

Hallo,

ich schlage mich gerade mit der css Formatierung eines <span> herum.

Wenn ich das richtig verstanden habe, sollte eine css Angabe wie

.mittig {
text-align: center;
vertical-align: middle;
}

und einem <span class="mittig">bla bla</span> alles zentriert ausgeben oder? Warum tut es das nicht?

Sorry ich steh wohl etwas auf dem Schlauch.
Wenn ich die Klasse einem <p> zuweise funktioniert das.

THX

lach

[Tom2]

Ciao

Wenn ich das richtig verstanden habe, sollte eine css Angabe wie

.mittig {
text-align: center;
vertical-align: middle;
}

und einem <span class="mittig">bla bla</span> alles zentriert ausgeben oder? Warum tut es das nicht?

AFAIK weil span ein Inline-Element ist. text-align und vertical-align lassen sich nur auf Block-Elemente, wie div oder eben p, anwenden.

FG & HTH

Tom2

[MudGuard]

Hi,

Wenn ich das richtig verstanden habe, sollte eine css Angabe wie
.mittig {
text-align: center;
vertical-align: middle;
}
und einem <span class="mittig">bla bla</span> alles zentriert ausgeben oder? Warum tut es das nicht?

Nein, das kann nicht klappen.

Wie Tom2 bereits sagte, ist span ein (non-replaced) inline-Element. Für inline-Elemente ist text-align nicht erlaubt.
Es hätte aber auch keinen Sinn, denn ein inline-Element ist immer so breit wie sein Inhalt (auch width/height sind für non-replaced-inline Elemente nicht erlaubt). Es wäre also gar kein Platz vorhanden, um den Inhalt des span innerhalb des span auszurichten.

Wenn ich die Klasse einem <p> zuweise funktioniert das.

p ist ja auch ein block-level Element. Dieses hat eine Breite unabhängig von seinem Inhalt.

cu,
Andreas

[Maxx]

Hallo,

Wenn ich das richtig verstanden habe, sollte eine css Angabe wie

.mittig {
text-align: center;
vertical-align: middle;
}

und einem <span class="mittig">bla bla</span> alles zentriert ausgeben oder? Warum tut es das nicht?

Er tut es schon, nur siehst du es nicht. <span> ist ein inline-Element.
Text1 Text1 <span>Text2</span> Text3 Text3 ist Fließtext. Wie stellst du dir vor, dass da etwas horizontal zentriert werden soll? Einzig die Angabe vertical-align würde - wenn Text2 eine geringere Schriftgröße hat - diesen vertikal zentrieren. Bezogen auf die Schrifthöhe des Elternelementes.

Wenn ich die Klasse einem <p> zuweise funktioniert das.

Ja klar. <p> ist auch ein Block-Element und nimmt, sofern man nicht etwas anderes angibt, die gesamte zur Verfügung stehend Breite ein. Und innerhalb dieser Breite wird nun horizontal zentriert.

Alles klar?

Grüße,

Jochen

[lachesis]

Hi & danke euch allen,

komisch wenn mir hier jemand meine Probleme erklärt, versteh ichs sofort.

Warum komme ich da nicht selbst drauf?

Um mein Problem zu lösen, sollte ich also ein <p> verwenden und mit display: inline;  dafür sorgen, dass der störende Zeilenumbruch verschwindet, richtig?

Grüßle

lach

[MudGuard]

Hi,

Um mein Problem zu lösen, sollte ich also ein <p> verwenden und mit display: inline;  dafür sorgen, dass der störende Zeilenumbruch verschwindet, richtig?

Falsch. Mit display:inline machst Du das Element zu einem inline-Element - woraufhin es automatische Breite hat (so breit wie der Inhalt).
Auch width/height/text-align gelten dann nicht mehr.

float wäre ggf. ein Ansatz.

cu,
Andreas