align image div inside of anothe div vertically - css

Question

I am wanting to align a image div inside of another div. Pretty much have the image sit in the middle with white space above and below.
Here is my code: 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>
and
.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;
}
Thank you for the upcoming help.

Answer 1

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