how to align elements within a div - html

Question

I have a parent div ("prizes") with 3 child divs ("galleryItem"). Each div has an h2, img, and p element. The h2 elements are on the same line when viewing in the browser, but I can't figure out how to align the img's and p's to the same line as well. Here is a link to my code:
<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ipad3.jpg">
<p>Ipad Mini 3</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="xbox.png">
<p>Xbox One</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="beats.png">
<p>Beats by Dre Pro</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ikea.png">
<p>$250 Ikea Gift Card</p>
</div>
</div>
.prizes {
margin: 4.5em auto;
background-color: whitesmoke;
padding-top: 100px;
overflow: hidden;
display: table;
}
.prizes h1 {
color: darkslategray;
margin-left: auto;
margin-right: auto;
position: relative;
top: -75px;
font-family: 'Lato';
text-align: center;
}
.galleryItem {
float: left;
color: darkslategray;
width: 17%;
margin: 0 4%;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.galleryItem h2 {
font-family: 'Lato', Sans-Serif;
}
.galleryItem img {
max-width: 100%;
}
.prizes p {
float: left;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 40px;
}
I essentially want each div to be a "blurb" with all three inline and the elements of each inline with each other. Thanks in advance for any help, it is greatly appreciated!

Answer 1

Put image inside the p tag.
<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<p>
<img src="ipad3.jpg">
Ipad Mini 3
</p>
</div>
</div>

Answer 2

You need to wrap the img tags inside the p element, Demo

Answer 3

set marign .prizes p like
.prizes p {
float: left;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 40px;
margin:15px 0;
}
.prizes {
margin: 4.5em auto;
background-color: whitesmoke;
padding-top: 100px;
overflow: hidden;
display: table;
}
.prizes h1 {
color: darkslategray;
margin-left: auto;
margin-right: auto;
position: relative;
top: -75px;
font-family: 'Lato';
text-align: center;
}
.galleryItem {
float: left;
color: darkslategray;
width: 17%;
margin: 0 4%;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.galleryItem h2 {
font-family: 'Lato', Sans-Serif;
}
.galleryItem img {
max-width: 100%;
}
.prizes p {
float: left;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 40px;
margin:15px 0;
}
<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ipad3.jpg">
<p>Ipad Mini 3</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="xbox.png">
<p>Xbox One</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="beats.png">
<p>Beats by Dre Pro</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ikea.png">
<p>$250 Ikea Gift Card</p>
</div>
</div>

Answer 4

I have seen your design, all are center aligned, just remove the float attribute from p tag

Answer 5

<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ipad3.jpg">
<p>Ipad Mini 3</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="xbox.png">
<p>Xbox One</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="beats.png">
<p>Beats by Dre Pro</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ikea.png">
<p>$250 Ikea Gift Card</p>
</div>
</div>
.prizes {
margin: 4.5em auto;
background-color: whitesmoke;
padding-top: 100px;
overflow: hidden;
display: table;
}
.prizes h1 {
color: darkslategray;
margin-left: auto;
margin-right: auto;
position: relative;
top: -75px;
font-family: 'Lato';
text-align: center;
}
.galleryItem {
float: left;
color: darkslategray;
width: 40%;
margin: 0 4%;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.galleryItem h2 {
font-family: 'Lato', Sans-Serif;
}
.galleryItem img {
max-width: 100%;
float:left;
}
.prizes p {
float: none;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 0;
}