Home » , , , » Absolute Center (Vertical & Horizontal) An Image/Photo

Absolute Center (Vertical & Horizontal) An Image/Photo

Written By Nathen Bridgwater on Friday, March 8, 2013 | 10:00 AM

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

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 { 
   background:url(logo.png) center center no-repeat;

Table technique:

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

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

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

Share this article :


Post a Comment

Copyright © 2013. Read Read Loved - All Rights Reserved
Proudly powered by Blogger