CODEWITHSUNDEEP
htmlcss
Jack Doyle
Jack Doyle

Reputation: 39

how to align elements within a div

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!

Upvotes: 1

Views: 104

Answers (5)

Kishan
Kishan

Reputation: 1190

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>

Upvotes: 1

kaushik dey
kaushik dey

Reputation: 102

   <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;
   }

Upvotes: 0

Subhajit Das
Subhajit Das

Reputation: 499

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

Upvotes: 0

stanze
stanze

Reputation: 2480

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

Upvotes: 1

S Vinesh
S Vinesh

Reputation: 539

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>

Upvotes: 2

Related Questions