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?
<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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<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>
<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>
ASKER
ok
<li class='verticalAlignedImag
</ul>
give css as
li.verticalAlignedImage
{
width: 300px;
height:300px;
}
li.verticalAlignedImage img
{
width: 145px;
height:165px;
margin: 68px 77px;
}