dorlevi Posted March 2, 2013 Share Posted March 2, 2013 Hello,i am decoding a psd to html and css,and i have this code: <!DOCTYPE html><html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8" /> <title>בית ספר לקעקועים</title> <style> body { background-color:#042870; no-repeat fixed 100% 100%; } </style> </head> <body> <div> <img src="images/platform.png " style="position:relative; z-index:-1;" /> <a href="about.html"> <img class="alignImg" src="images/about.png " style="position: absolute;left:920px; top: 250px;" /> </a> this code works (no matter what the screen size is)but when i add align to center it ruiz the pagewhen the page is bigger then the html file all the buttons move from where they should be....(i want them in the a specific location and when i dont use the align it put them in the right place but when i use the align when the screen is very big like mine it moves the buttons from their location....) how can i fix it? thx from advance Link to comment Share on other sites More sharing options...
newseed Posted March 25, 2013 Share Posted March 25, 2013 (edited) Your code doesn't seem to be complete but if you are trying to align the main image so that it positioned in the center of the screen then you need more css to make that happen. HTML: <div class="centereddiv"><a href"about.html><img src="images/about.png "/></a></div> CSS: .centereddiv {position: absolute;top: 50%;left: 50%;/*= this is half of the amount of what the image size is. If your image is 500px X 400px then you would set a negative -200px for the top margin and a negative of -250px for the left margin.*/margin-top: -200px;margin-left: -250px;} You can use this same concept for just about anything such centering mulitple images or text or whatever. Edited March 25, 2013 by newseed Link to comment Share on other sites More sharing options...
-pollux- Posted March 26, 2013 Share Posted March 26, 2013 If you want to center anything, just add margin: 0 auto and you should have it centered. Link to comment Share on other sites More sharing options...
newseed Posted March 26, 2013 Share Posted March 26, 2013 If you want to center anything, just add margin: 0 auto and you should have it centered. Concur. That is fine if you want to center something left/right but it doesn't work top/bottom and based on his post it seems to me that he was trying to get the block of content/image to be centered of the browser including top/bottom positioning. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now