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

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -