html - how to align elements within a div -
i have parent div ("prizes") 3 child divs ("galleryitem"). each div has h2, img, , p element. h2 elements on same line when viewing in browser, can't figure out how align img's , p's same line well. here link 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 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 want each div "blurb" 3 inline , elements of each inline each other. in advance help, appreciated!
put image inside 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>
Comments
Post a Comment