I am currently working on a website and looking to include images with captions that display the price of each item underneath. The issue I'm facing is that the captions are aligning horizontally instead of vertically. Can anyone provide assistance with this?
Below is my HTML and CSS code:
HTML CODE
<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>
// Remaining image figures go here
</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 CODE
.wrapper {
margin:0 auto;
background-color:#D1CED4;
}
.top {
background-color:#000000;
padding-bottom:2.5em;
}
// Remaining CSS styles come here