I have a document structure in which an unordered list contains divs with images in them. The divs all have a set height of 150px, but some of the images happen to be smaller than that. Is there a way in CSS to vertically position the images within the div itself.
JSFIDDLE: http://jsfiddle.net/xQ7pJ/
My HTML:
<ul>
<li>
<div>
<img src=""/>
</div>
</li>
</ul>
Thanks.
The easiest way to do this would be to apply the image as a background image on the div itself and set the background position to 50% + no-repeat.
<ul>
<li>
<div style="background: url(http://bestvaluesupply.devsiteonline.com/ProdImages/SEY%2098-50-1.jpg) 50% 50% no-repeat"></div>
</li>
</ul>
http://jsfiddle.net/sbeliv01/xQ7pJ/2/
Although in this case, if the image is larger than the 150px container then it will be cut off at those constraints.
Other than that method, if you don't need to worry about IE7 or less and you're only planning to display that single image within the div, then you can set the div to display: table-cell and then set the vertical-align: middle; text-align: center;.
ul li div { display: table-cell; vertical-align: middle; text-align: center; }
