Forum Moderators: not2easy
I've got access to the CSS so I can tweak the code but what I'd like to be able to do is to position the image inside the div so it is centered.
This would be fairly straight-forward if the image was of a specific size but it can be anything - the only thing is that it's constrained to 320x240. But that can mean that if there's a portrait image that this can be 126x240 for example.
At the moment the images are just aligned left and to the top of their containing div so it all looks a bit messy. I'd like to be able to have borders on the areas that don't fill up the 320x240 box.
Any ideas?
To center it vertically, make the image align in the center of the line and make the line the height of the div ...
Warning: might not be pixel perfect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
div {
border: 1px solid black;
width: 320px;
height: 240px;
text-align:center;
line-height: 240px;
}
div>img {
vertical-align:middle;
}
</style>
</head>
<body>
<div>
<img src="2s.jpg" alt="mandatory" />
</div>
</body>
</html>
Thanks for this - very much appreciated and works well in Mac Browsers, as you said Ie6 isn't as good though.
