오른쪽에 겹쳐진 텍스트 정렬

Question

다른 크기의 여러 이미지를 중앙에 표시하고 열을 추가로 표시하려고합니다. 첫 번째 이미지에 중첩 된 제목이 표시되고 오른쪽에 정렬됩니다.

http://jsfiddle.net/c48em4ng/

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

내가 그러나 제대로 이미지의 오른쪽에 텍스트를 정렬 할 수없는, 즉 오른쪽을 갖는 다음과 같이 왼쪽의 제목을 갖는

는

, 괜찮습니다 이미지의 오른쪽과 일치하는 텍스트

left: auto을 right: 0px으로 바꾸면 제목이 완전히 오른쪽에 있습니다. 내가 text-align: right와 position: absolute를 교체 할 경우 http://jsfiddle.net/c48em4ng/1/

는 수평 정렬은 괜찮지 만, 제목이 이미지의 위 끝 : 이 http://jsfiddle.net/c48em4ng/2/

내가 할 수있는 최선은 right: 26.5% 만의 같은 수동으로 튜닝입니다 물론 그것은 다른 모든 곳에서 작동 할 것입니다. http://jsfiddle.net/c48em4ng/3/

Answer 1

position: relative을 적용 할 텍스트 및 이미지에 배치 요소를 사용해야합니다. 그런 다음 텍스트의 absolute 위치는이 래퍼와 관련되어 있습니다 (예 : 피들처럼 body이 아님). http://jsfiddle.net/m4vno3oa/1/