Link to home
Start Free TrialLog in
Avatar of johndenny
johndenny

asked on

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?
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

<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;  
}

ASKER CERTIFIED SOLUTION
Avatar of WilliamStam
WilliamStam
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
<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>
Avatar of johndenny
johndenny

ASKER

ok