如何在div中對齊元素

Question

我有一個父div（“ prizes”）和3個子div（“ galleryItem”）。 每個div都有一個h2，img和p元素。 在瀏覽器中查看時，h2元素在同一行上，但是我不知道如何將img和p對齊到同一行。 這是我的代碼的鏈接：

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

}

我本質上希望每個div都是所有三個內聯的“模糊”，並且每個內聯的元素都相互關聯。 在此先感謝您的幫助，不勝感激！

Answer 1

將圖像放在p標簽內。

<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

設置marign .prizes p喜歡

.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 3

您需要將img標簽包裝在p元素Demo中

Answer 4

我看過您的設計，所有設計都居中對齊，只需從p標簽中刪除float屬性

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