이미지 밑에 캡션을 정렬하는 방법

Question

총 9 개의 이미지가 있고 각 행에 3 개의 이미지가 있습니다. 내 이미지 중 하나에 캡션을 추가 할 수 있었지만 다른 것들에 캡션을 추가 할 수 없었습니다. 텍스트를 이미지 당 행에 정렬하지 않았습니다.

<figure> 
<center> 
<img src='images/album1.jpg' alt='missing' /> 
<figcaption>Album name goes here 
<br>Year goes here 
<br>artist name goes here</figcaption> 

<img src='images/album2.jpg' alt='missing' /> 
<figcaption>Album name goes here 
<br>Year goes here 
<br>artist name goes here</figcaption> 

<img src='images/album2.jpg' alt='missing' /> 
<figcaption>Album name goes here 
<br>Year goes here 
<br>artist name goes here</figcaption> 
</figure><center> 

등등.

Answer 1

나는 이런 식으로 코드를 설정합니다 :

<figure> 
    <img src='http://placehold.it/200x200' alt='missing' /> 
    <figcaption>Album name goes here 
     <br>Year goes here 
     <br>artist name goes here</figcaption> 
</figure> 

을 다음과 같은 CSS 적용 : 각 figure 인라인 블록이기 때문에

figure { 
    display: inline-block; 
    border: 1px dotted gray; 
    margin: 20px; /* adjust as needed */ 
} 
figure img { 
    vertical-align: top; 
} 
figure figcaption { 
    border: 1px dotted blue; 
    text-align: center; 
} 

을, 당신은 기본적으로 수 행당 세 번씩 단위를 반복하십시오. 매 3 초마다 <br>을 추가하거나 블록 요소에 3을 감싸거나 CSS3 01을 사용하십시오줄 바꿈 등을 추가하는 셀렉터입니다.

에 text-align: center을 사용하여 테스트를 중앙에 맞 춥니 다. 결과는 (충분히 넓은 화면)과 같이 http://jsfiddle.net/audetwebdesign/4njG8/

:에

참조 데모

Answer 2

각 그림은 하나의 이미지와 하나의 figcaption 만 포함해야합니다.

<figure> 
    <img> 
    <figcaption> 
    </figcaption> 
</figure> 

BTW ... 'center'요소가 더 이상 존재하지 않습니다.

Codepen Example