Results 1 to 3 of 3

Thread: image positioning

  1. #1
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default image positioning

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

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Here is a demo

    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>
    I have attached the image also so that you can check the furnished code.

    Hope this helps.

  3. The Following User Says Thank You to codeexploiter For This Useful Post:

    jhatter (11-18-2009)

  4. #3
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default

    Thank you code exploiter this solves the problem

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •