Jump to content

align to center ruin the html file

Recommended Posts

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 post
Share on other sites
  • 4 weeks later...

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>


.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 by newseed
Link to post
Share on other sites
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...