이미지 캡션을 구현하는 가장 좋은 방법은 무엇입니까?

Question

콘텐츠 내부에 들어갈 수있는 캡션이있는 이미지를 내재하고 싶습니다. 왼쪽, 오른쪽 및 중앙 정렬 할 수 있습니다.

학부모 div는 동적 너비를 가지며 이미지에는 동적 이미지가 있습니다.

어떻게 구현하나요?

내가 시도 다음 일은 :

<div class="col-lg-4"> 
    <div class="image" style="display:table;"> 
    <img src="foo.jpg" alt="" /> 
    <div style="display:table-caption;caption-side:bottom;">This is the caption.</div> 
</div> 
</div> 

그러나이 방법 그래서 상위 4 div.col-LG보다 폭이 더 많은 이미지를해야 가지고 그 이미지 FF에서 작동하지 않습니다 처음 너비가 고정되었거나 display : table이있는 상위 블록이 있습니다. 따라서 테이블 및 표 캡션 속성을 사용하는 것은 의미가 없습니다. 너비를 설정할 수 있고 그들을 사용하지 않기 때문에. 당신이 그것을 원인 (도 1 x 1 픽셀 크기를 수) display: table 및 width: 1%로 설정해야하므로

Answer 1

내 선호하는 방법은 블록 레벨 요소를 figure 및 figcaption

http://jsfiddle.net/3n1gm4/rfsYy/

<figure> 
    <img src="animageURL.jpg" alt="an image" /> 

    <figcaption>The images caption woo woo</figcaption> 
</figure> 

figure이다 사용 스트레치하지만 동시에 단단하다.

figure { 
    margin: 10px; 
    padding: 10px; 
    background: #ccc; 
    display: table; 
    float: left; 
    width: 1%; 
} 

Answer 2

m 이 상황에서 figure/figcaption은 이상적입니다. 응답 성

<div class="wrapper"> 
    <figure> 
     <img src="http://lorempixel.com/100/100/" alt=""/> 
     <figcaption>Text 1</figcaption> 
    </figure> 
    <figure> 
     <img src="http://lorempixel.com/200/200/" alt=""/> 
     <figcaption>Text 2</figcaption> 
    </figure> 
    <figure> 
     <img src="http://lorempixel.com/50/50/" alt=""/> 
     <figcaption>Text 3</figcaption> 
    </figure> 

</div> 

JSFiddle

는 inline-block 도면에 설정.