<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Center</title>
<style type="text/css">
span {
float: left; border: 1px solid black;
margin: 1px; overflow: hidden;
width: 75px; height: 75px; position: relative; }
a { position: absolute; left: 50%; top: 50%; }
img {
position: relative; left: -50%; top: -50%;
vertical-align: middle; border: 0px; }
</style>
</head>
<body>
Got some problems with css centering. The task is to center an |img|> element vertically and horizontally in outer container. Image dimensions are liquid and container dimensions are constant. The problem is that even if the image is larger then the container element itself it still must reside in the very center of it with hidden edges behind the container edges.
In other words, i need the same behavior as if the image is in container block background, centered and not repeated, but the main point in my case is that I need to use |img| element.
All popular css centering solutions I have managed to find in the Net are not good enough, because they do not hide the image being in the center, or hide only right and bottom parts of it, remaining left and top edges visible.
I came up to the following code, but it only works in IE and Opera. FF refuses render it the same way.
<span><a href="#"><img
src="http://farm1.static.flickr.com/49/148093302_acb4062fbd_m.jpg"
alt="big"></a></span>
<span><a href="#"><img
src="http://farm1.static.flickr.com/79/buddyicons/71239936@N00.jpg?1161129422"
alt="small"></a></span>
</body>
</html>