Text-Alignment auf Zeilenebene statt auf Absatzebene möglich?



  • Ist es möglich, innerhalb eines <p>-Elements die Textausrichtung jeweils auf Zeilenebene festzulegen?

    Ein Beispiel:

    <p>Und hier haben wir ein Bild:<br>
    <img src="bild.jpg"><br>
    Sieht es nicht toll aus?</p>
    

    Kann ich es irgendwie machen, dass das Bild bzw. die komplette Zeile 2 jetzt zentriert ist, während der normale Text linksbündig bleibt?

    Wenn ich alle drei Zeilen jeweils in ein eigenes <p> packe, dann wird das ja standardmäßig mit Leerzeilen dazwischen dargestellt. Genau das will ich eben nicht, wenn es anders geht.

    Und jetzt extra ein Style für diese Art von Darstellung definieren, wäre etwas Overkill. Vor allem, weil ich ja dann etwas für alle drei Absätze definieren müsste:

    p.before_image
    {
    	margin-bottom: 0;
    }
    
    p.image
    {
    	text-align:    center;
    	margin-top:    0;
    	margin-bottom: 0;
    }
    
    p.after_image
    {
    	margin-top:    0;
    }
    


  • Das ist soweit ich weiß nicht vorgesehen. Ein Absatz soll AFAIK immer die gleiche Ausrichtung haben.

    böses Workaround (ähnelt deinem Ansatz):

    <p style="margin-bottom:0px">Und hier haben wir ein Bild:
    <div style="text-align: center"><img src="bild.jpg"></div>
    Sieht es nicht toll aus?</p>
    

    Der nächste Absatz würde wieder normal mit einer Leerzeile dazwischen erscheinen. Die üblichen Browser sehen p ab div als beendet an, wodurch es so eigentlich richtig wäre:

    <p style="margin-bottom:0px">Und hier haben wir ein Bild:</p>
    <div style="text-align: center"><img src="bild.jpg"></div>
    Sieht es nicht toll aus?
    

    Um allerdings für den Entwickler erkennbar zu machen, dass es sich um einen zusammenhängenden Absatz handelt, könnte dann die erste Variante verwendet werden (ist aber wie gesagt nicht besonders sauber).


Anmelden zum Antworten