Question

我有一个父div（＆＃34;奖品＆＃34;），有3个子div（＆＃34; galleryItem＆＃34;）。每个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都是＆＃34; blurb＆＃34;所有三个内联和每个元素彼此内联。在此先感谢您的帮助，非常感谢！

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 like

.prizes p {
  float: left;
  color: darkslategray;
  font-family: 'Merriweather', serif;
  margin-top: 40px;
  margin:15px 0;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您需要将java.sql.Connection标记包含在img元素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;
   }

如何在div中对齐元素

5 个答案: