Printable View
I have an image that needs to be positioned 138px vertically from the top and I require it to be centered in the browser, horizontally.
How would I adapt the style below, which currently does not work, to make this happen?
#logo { position: relative; top:138px; center; }
Here is a demo
I have attached the image also so that you can check the furnished code.Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.container{
width: 960px;
border:1px dotted red;
height: 600px;
margin:0 auto;
}
.img-container{
width:159px;
height:168px;
margin:0 auto;/*Horizontal Alignment*/
position:relative;
top: 138px;/*To leave 138px on top*/
}
</style>
</head>
<body>
<div class="container">
<div class="img-container">
<img src="mac.png" style="border:none;width:159px;height:168px;" alt="Mac" />
</div>
</div>
</body>
</html>
Hope this helps.
Thank you code exploiter this solves the problem