Überlagerte Text auf der rechten Seite

Question

Ich versuche, mehrere Bilder von verschiedenen Größen zentriert und in der Spalte anzuzeigen, und zusätzlich zu einem überlagerten Titel auf dem ersten Bild, ausgerichtet auf der rechten Seite.

den Titel auf der linken Seite zu haben, ist in Ordnung, wie hier gezeigt:

http://jsfiddle.net/c48em4ng/

p { 
    position: absolute; 
    top: 10%; 
    left: auto; 
} 

kann ich aber nicht richtig, den Text auf der rechten Seite des Bildes auszurichten, dh die rechte Seite mit dem Der Text entspricht der rechten Seite des Bildes. Wenn ich die left: auto durch right: 0px ersetze, ist der Titel vollständig auf der rechten Seite. http://jsfiddle.net/c48em4ng/1/

Wenn ich die position: absolute mit text-align: right ersetzen, die horizontale Ausrichtung ist in Ordnung, aber der Titel endet über dem Bild oben: http://jsfiddle.net/c48em4ng/2/

Das Beste, was ich tun könnte, ist wie right: 26.5% etwas manuell einstellen, aber von Natürlich wird es anderswo funktionieren. http://jsfiddle.net/c48em4ng/3/

Answer 1

Sie sollten ein Umbruchelement für Text und Bild verwenden, für das Sie position: relative anwenden. Dann wird die absolute Positionierung des Textes in Bezug auf diesen Wrapper (und nicht auf die body, wie in Ihrer Geige) und bringen Sie das gewünschte Ergebnis, siehe http://jsfiddle.net/m4vno3oa/1/