将图像div垂直对齐另一个div内部

Question

我想在另一个div中对齐图像div。几乎让图像位于中间，上方和下方都有白色空间。

这是我的代码：http://jsfiddle.net/f098xnrk/

     <h1><img src="http://i.imgur.com/akaZnwC.png"></h1>
     <div id="content">
        <div class="Division">
           <div class="picture">
              <img src="http://i.imgur.com/LXbVyBU.jpg">
           </div>
           <div class="info">
              <h3>brand new bbs wheels</h3>
              <h4>brand new pair for sale, comes with no tires or...</h4>
              <div class="alignleft">
                 <div class="price">$1200</div>
              </div>
              <div class="alignright"><a class="btn" href="part_listing.php?id=39">More Info</a></div>
              <div style="clear: both;"></div>
           </div>
        </div>
     </div>

和

.Division {
     background: none repeat scroll 0 0 white;
     border: 1px solid #ddd;
     border-radius: 4px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
     display: inline-block;
     margin: 5px;
     padding: 4px;
     width: 280px;
     }
     .picture {
     height: 280px;
     width: 280px;
     }
     .picture img {
     width:280px;
     }
     h1 {
     padding-left: 10px;
     }
     .alignleft {
     float: left;
     margin: 0;
     }
     .alignright {
     float: right;
     margin: 0;
     }
     .info h3 {
     font-size: 20px;
     margin: 9px 0;
     padding: 0;
     }
     .info h4 {
     font-size: 11px;
     margin: 5px 0;
     padding: 0;
     }
     body { 
     margin: 0 auto;
     width: 1245px;
     background: none repeat scroll 0 0 #ecf0f1;
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size: 14px; 
     }
     #content {
     margin:0px auto;
     text-align: center;
     padding:15px;
     background:none repeat scroll 0 0 #fff
     }
     .info {
     text-align: left;
     }
     .btn {
     background: #3498db;
     background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
     background-image: -moz-linear-gradient(top, #3498db, #2980b9);
     background-image: -ms-linear-gradient(top, #3498db, #2980b9);
     background-image: -o-linear-gradient(top, #3498db, #2980b9);
     background-image: linear-gradient(to bottom, #3498db, #2980b9);
     -webkit-border-radius: 5;
     -moz-border-radius: 5;
     border-radius: 5px;
     font-family: Arial;
     color: #ffffff;
     font-size: 14px;
     padding: 10px 20px 10px 20px;
     text-decoration: none;
     display: inline-block;
     width:75px;
     text-align:center;
     }
     .btn:hover {
     background: #3cb0fd;
     background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
     background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
     background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
     background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
     background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
     text-decoration: none;
     }
     .price {
     border: 1px solid #3498db;
     -webkit-border-radius: 5;
     -moz-border-radius: 5;
     border-radius: 5px;
     font-family: Arial;
     font-size: 14px;
     padding: 9px 20px;
     text-decoration: none;
     display: inline-block;
     width:75px;
     text-align:center;
     }

感谢您的帮助。

Answer 1

使用 vertical-align:middle

.Division {
  background: none repeat scroll 0 0 white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  display: inline-block;
  margin: 5px;
  padding: 4px;
  width: 280px;
}
.picture {
  height: 280px;
  width: 280px;
  display:table-cell; /*.. vertical-align property can be apply for table-cell ...*/
  vertical-align:middle; /*... to set image vertically center ...*/
}
.picture img {
  width: 280px;
}
h1 {
  padding-left: 10px;
}
.alignleft {
  float: left;
  margin: 0;
}
.alignright {
  float: right;
  margin: 0;
}
.info h3 {
  font-size: 20px;
  margin: 9px 0;
  padding: 0;
}
.info h4 {
  font-size: 11px;
  margin: 5px 0;
  padding: 0;
}
body {
  margin: 0 auto;
  width: 1245px;
  background: none repeat scroll 0 0 #ecf0f1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}
#content {
  margin: 0px auto;
  text-align: center;
  padding: 15px;
  background: none repeat scroll 0 0 #fff
}
.info {
  text-align: left;
}
.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  display: inline-block;
  width: 75px;
  text-align: center;
}
.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
.price {
  border: 1px solid #3498db;
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Arial;
  font-size: 14px;
  padding: 9px 20px;
  text-decoration: none;
  display: inline-block;
  width: 75px;
  text-align: center;
}

<body>
  <h1><img src="http://i.imgur.com/akaZnwC.png"></h1>
  <div id="content">
    <div class="Division">
      <div class="picture">
        <img src="http://i.imgur.com/LXbVyBU.jpg">
      </div>
      <div class="info">
        <h3>brand new bbs wheels</h3>
        <h4>brand new pair for sale, comes with no tires or...</h4>
        <div class="alignleft">
          <div class="price">$1200</div>
        </div>
        <div class="alignright"><a class="btn" href="part_listing.php?id=39">More Info</a>
        </div>
        <div style="clear: both;"></div>
      </div>
    </div>
  </div>