• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 459
  • Last Modified:

position img vertical align to parent container

<ul>
<li> <img ... /> </li>
</ul>

say li is 300x300. and img could be less than that, say 145x165
i want this image position in the center (vertically and horizontally)
current li's position is relative.

how can i do that from css?
0
johndenny
Asked:
johndenny
1 Solution
 
Gurvinder Pal SinghCommented:
<ul>
<li class='verticalAlignedImage'> <img ... /> </li>
</ul>

give css as

li.verticalAlignedImage
{
  width: 300px;
  height:300px;
}

li.verticalAlignedImage img
{
  width: 145px;
  height:165px;
  margin: 68px 77px;  
}

0
 
WilliamStamCommented:
not sure if this will work. will you be able to know how big the image is when you run it?

since this is in the jQuery side... heres a jquery solution (this works if you dont know the images size before hand... if you know the image size you can just maring-top: -half of its size

http://www.jsfiddle.net/rLjsB/


the css. the li 1 pretty much just puts blocks around that you can see if its working or not

li {
    border:#000 1px solid;
}
li.verticalAlignedImage {
    position:relative;
    width:300px;
    height:300px;    
}
li.verticalAlignedImage img {
    position:absolute;
    top:50%;
    left:50%;
}

the jquery

$(document).ready(function () {
	$(".verticalAlignedImage img").each(function(){
		var $this = $(this), h = $this.height(), w = $this.width();
		$this.css({"margin-top":-Math.round(h/2),"margin-left":-Math.round(w/2)});
	});
		
});

the html (just found a random image on the net)

<ul>
<li class='verticalAlignedImage'> <img src="http://www.snr.arizona.edu/files/shared/images/placeholder.jpg" width="165" height="140" /> </li>
<li class='verticalAlignedImage'> <img src="http://www.snr.arizona.edu/files/shared/images/placeholder.jpg" width="300" height="300" /> </li>
<li class='verticalAlignedImage'> <img src="http://www.snr.arizona.edu/files/shared/images/placeholder.jpg" width="100" height="50" /> </li>
</ul>

Open in new window

0
 
BurniePCommented:
<html>
<head>
<title></title>
<style type="text/css">
.imgCenter
{
  text-align:center;
  vertical-align:middle;
}

.li
{
  width:300px;
}
</style>
</head>
<body>
<ul>
<li class="li"><img class="imgCenter" src="Images/Sky.jpg" /></li>
</ul>
</body>
</html>
0
 
johndennyAuthor Commented:
ok
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now