Solved

position img vertical align to parent container

Posted on 2010-09-21
4
426 Views
Last Modified: 2012-05-10
<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
Comment
Question by:johndenny
4 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33731312
<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
 
LVL 2

Accepted Solution

by:
WilliamStam earned 250 total points
ID: 33733101
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
 
LVL 16

Expert Comment

by:BurnieP
ID: 33845642
<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
 

Author Closing Comment

by:johndenny
ID: 34375239
ok
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now