Friday, March 8, 2013

Absolute Center (Vertical & Horizontal) An Image/Photo


Here are some usefull techniques and guidance of CSS and one HTML code for Absolute Center (Vertical & Horizontal) An Image.

Caution:
The problem here is that if you will re-size the browser you cannot scroll to the top. For example: if you have a menu on top you cant view it.


CSS background-image Technique:




html { 
   width:100%; 
   height:100%; 
   background:url(logo.png) center center no-repeat;
}

Table technique:

***---CSS----***
html, body, #wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}
***---HTML---***

<html>
<body>
   <table id="wrapper">
      <tr>
         <td><img src="logo.png" alt="" /></td>
      </tr>
   </table>
</body>
</html>


CSS + Inline Image Technique:

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}
It is also possible to do this using div’s and CSS:

<div class="contendor" style="border: 1px solid green; margin: 0; padding: 0; display: table">
<div class="contendor-secundario" style="border: 1px solid yellow; margin: 0; padding: 0; display: table-row">
<div class="columna1" style="border: 1px solid red; margin: 0pt; padding: 0pt; vertical-align: middle; display: table-cell">columna uno</div>
<div class="columna2" style="border: 1px solid blue; margin: 0; padding: 0; display: table-cell">column two,
which is quite higher than the previous one,
also,  we can make even higher
and column 1 is no longer centered
</div>
</div>
</div>

Posted by admin Pm001 at 10:00 AM  

Labels: , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)