캡션으로 피규어 정렬

Question

빠른 웹 사이트를 만들고 있는데 이미지의 각 항목 가격을 포함 할 각 이미지 아래에 캡션이 하나있는 이미지가 있어야합니다. 그러나 각 이미지 아래에 캡션을 넣었으나 세로로 정렬 되길 원하지만 현재는 가로로 정렬되어 있습니다. 아무도 나를 도와 줄 수 있니?

아래 HTML과 CSS 코드를 첨부했습니다.

FIDDLE

HTML 코드

<div class="wrapper"> 

<div class="top"> 
    <!--Background set in CSS--> 
</div><!-- end of top--> 

<div class="menu"> 
     <h1>Rosy's Jewellery</h1>     
     <ul id="nav">  
     <li><a href="index.html">Home   </a></li> 
     <li><a href="Bracelets.html">Jewellery </a></li> 
     <li><a href="Locations.html">Locations </a></li> 
     <li><a href="ContactUs.html">Contact Us </a></li> 
     <li><a href="Reviews.html">Reviews  </a></li> 
     </ul>  
</div> 
<!-- end of menu --> 


    <div class="main2"> 
    <H1>Jewellery</H1> 
     <ul id="nav2"> 
     <li><a href="Bracelets.html">Bracelets </a></li> 
     <li><a href="Necklaces.html">Necklaces </a></li> 
     <li><a href="Earrings.html">Earrings </a></li> 
     </ul> 
      <div class ="figures"> 

       <FIGURE> 
       <img src="Images/Jewellery2.png"> 
       <FIGCAPTION>Jewellery.</FIGCAPTION> 
       </FIGURE> 

       <FIGURE> 
       <img src="Images/Jewellery3.png"> 
       <FIGCAPTION>Jewellery.</FIGCAPTION> 
       </FIGURE> 

       <FIGURE> 
       <img src="Images/Jewellery4.png"> 
       <FIGCAPTION>Jewellery.</FIGCAPTION> 
       </FIGURE> 

       <FIGURE> 
       <img src="Images/Jewellery1.png"> 
       <FIGCAPTION>Jewellery.</FIGCAPTION> 
       </FIGURE> 

       <FIGURE> 
       <img src="Images/Jewellery5.png"> 
       <FIGCAPTION>Jewellery.</FIGCAPTION> 
       </FIGURE> 

       <FIGURE> 
       <img src="Images/Jewellery9.png"> 
       <FIGCAPTION>Jewellery.</FIGCAPTION> 
       </FIGURE> 

       <FIGURE> 
       <img src="Images/Jewellery7.png"> 
       <FIGCAPTION>Jewellery.</FIGCAPTION> 
       </FIGURE> 

       <FIGURE> 
       <img src="Images/Jewellery8.png"> 
       <FIGCAPTION>Jewellery.</FIGCAPTION> 
       </FIGURE> 

       <FIGURE> 
       <img src="Images/Jewellery6.png"> 
       <FIGCAPTION>Jewellery.</FIGCAPTION> 
       </FIGURE> 

       </div>   
</div> 
<!--close main--> 



<div class="footer"> 
    <ul id="footer"> 
     <li> <img src="Images/facebook.png" /> 
     <img src="Images/twitter.png" /> </li> 
     <li> Twitter</li> 
     <li> Address </li>  
     <li> Tel</li> 
    </ul> 
</div> 
<!--end of footer--> 
</div> 

CSS 코드

.wrapper  { 
      margin:0 auto; 
      background-color:#D1CED4; ; 
      } 

.top   { 
      background-color:#000000; 
      padding-bottom:2.5em; 
      } 

.menu   { 
      background-color:#FFFFFF; 
      border-bottom-width:3px; 
      border-bottom-color:#000000; 
      border-bottom-style: solid; 
      position: relative; 
      top:-15px; 
      text-align:center; 
      font-family:Andalus; 
      font-size:16px; 
      padding-left:1em; 
      padding-right:1em; 
      overflow:hidden; 
      } 

.menu h1  { 
      float:left; 
      color:#999966; 
      font-family:andalus; 
      font-size:24; 
      } 


.main   { 
      width:65%; 
      margin:0 auto; 
      background-color:#FFFFFF; 
      text-align:center; 
      font-family:andalus; 
      font-size:16px; 
      padding-top:1em; 
      padding-bottom:1em; 
      height:100%; 
      } 


.main img  { 
      margin:2.2em; 
      }    


.main h1  { 
      font-size:20px; 
      font-family:andalus; 
      } 

.main2   { 
      width:65%; 
      margin:0 auto; 
      background-color:#FFFFFF; 
      text-align:center; 
      font-family:andalus; 
      font-size:16px; 
      padding-top:1em; 
      padding-bottom:1em; 
      height:100%; 
      }   


.main2 h1  { 
      font-size:20px; 
      font-family:andalus; 
      } 

.figures   { 
      display:inline; 
      } 


     { float: left; 
      } 


.footer   { 
      text-align:centre; 
      background-color:#C8C8C8; 
      color:#000000; 
      font-family:andalus; 
      } 

#footer li  { 
      display:inline-block; 
      padding-right:6em; 
      vertical-align:middle; 
      margin-top:-0.5em; 
      } 


#footer img  { 
      margin:1em; 
      } 


#nav   { 
      padding-top:1em; 
      } 


#nav a   { 
      text-decoration:none; 
      } 

#nav a:link  { 
      color:black; 
      } 

#nav a:visited  { 
      color:black; 
      } 

#nav a:hover  { 
      color:black; 
      } 


#nav ul   { 
      display:inline-block; 
      } 


#nav li   { 
      display:inline-block; 
      margin-right:4em; 
      padding-right:3em; 
      } 

#nav2   { 
      padding-top:1.5em; 
      } 

#nav2 a   { 
      text-decoration:none; 
      } 

#nav2 a:link { 
      color:black; 
      } 

#nav2 a:visited { 
      color:black; 
      } 

#nav2 a:hover   { 
      color:black; 
      } 


#nav2 ul   { 
      display:inline-block; 
      } 


#nav2 li   { 
      display:inline-block; 
      margin-right:2em; 
      padding-right:3em; 
      } 


.left   { 
      width:28%; 
      float:left; 
      } 

.right   { 
      width:28%; 
      float:right; 
      } 

form   { 
      margin: 0 auto; 
      width: 400px; 
      padding: 1em; 
      border: 1px solid #CCC; 
      border-radius: 1em; 
      margin-top: 2em; 
      } 

label   { 
      display: inline-block; 
      width: 90px; 
      text-align: right; 
      } 

Answer 1

은 간단히 추가

.figures figure { 
    display: inline-block; 
} 

JSFiddle demo합니다. 이 추가

Answer 2

시도 :

figure img { 
     display:inline-block; 
     vertical-align: middle; 

      } 
figure figcaption { 
      display:inline-block; 
    vertical-align: middle; 
} 

이 질문을 요청 것이 아니다

JSFiddle