Vertical alignment of text within a <div> - html

Question

I am making a webpage and learning how to use stylesheets.
I have 3 side by side "div" boxes, each with an image and text underneath the image.
HTML and CSS:
.prod_img_box {
vertical-align: middle;
text-align: center;
width: 300px;
border: 2px solid #black;
margin: 0 auto;
display: inline-block;
position: relative;
}
<div class="prod_img_box">
<img src="direct.png" alt="Storage Vessels" class="prod_img" border=2/>
<h3 class="white_font">Storage Vessels</h3>
</div>
<div class="prod_img_box">
<img src="tran_imm.png" alt="Immersion Heaters" class="prod_img" border=2/>
<h3 class="white_font">Immersion Heaters</h3>
</div>
<div class="prod_img_box">
<img src="at_chrome.png" alt="Towel Rail Heating Elements" class="prod_img " border=2/>
<h3 class="white_font">Towel Rail Heaters</h3>
</div>
This gives me something like the following:
which is almost what I want - but the text underneath each image is currently vertically centered (as it should be as it is inside the "prod_img_box" - but I want the text to be all in a horizontal line at the bottom.
I'm not sure of the best way to do this. Should it be something like:
<div class="image">IMAGE</div>
<div class="text">Storage Vessels</div>
<div class="image">IMAGE</div>
<div class="text">Immersion Heaters</div>
<div class="image">IMAGE</div>
<div class="text">Towel Rail Elements</div>
The webpage can be found here also.

Answer 1

I think you should use
<div class="image">IMAGE</div>
<div class="text">Storage Vessels</div>
and then set height for image class to set the text always stay at the bottom

Answer 2

Check border in this class It should be 2px solid black; or 2px solid #000;
.prod_img_box {
vertical-align: middle;
text-align: center;
width: 300px;
border: 2px solid black;
margin: 0 auto;
display: inline-block;
position: relative;
}
And Remove border=2 from every image tag if not required
Note: If you are using # tag then you need to set color by color code i.e. #000 or if you are using direct color name then you don't need to put # tag

Answer 3

You can set a default height to the div so that however the image is , it will display all the divs to be same and thus same level of texts.

Answer 4

The Div element is most commonly used to keep a group of content together. If you would like to keep the code together, the best way of moving the text is simply manipulating the padding and margin properties in the CSS file.