menu
Ad goes here

Saturday, 1 December 2012

How to place a box in the middle of the browser window?

Sometime developers are really afraid to do a silly thing, like how to center a div or how to middle align a custom pop-up or how to middle align an image. Even they looking for HTML expert help or spent lots of time on browsing to find out the solution. But can you imagine that a single class can do all the above things.

Suppose you want to use a message box in the middle of the browser window. Then see how you will do it with a single class for all monitor resolution.

CSS:
.popup { width:300px; height:350px; background:#CCC; 
border:#999 1px solid; position:absolute; left:50%; top:50%;
margin-left:-150px; margin-top:-175px; z-ndex:1200 }

HTML:
<div class=”popup”>

Your message goes here

</div>


It’s ready to use!

How it will work?
If you check the pop-up class properties very carefully then you will see there are ten properties.
  1. Width: Using for pop-up window.
  2. Height: Using for pop-up height
  3. Background: for pop-up background color
  4. Border: For pop-up box color
  5. Position: To make an absolute position of the pop-up box.
  6. Left: To position the pop-box in the half of the browser window from left side.
  7. Top: To position the pop-box in the half of the browser window from top side.
  8. Margin-Left: To make the pop-up box horizontal align. Please note that the minus value always will be half of the pop-up width.
  9. Margin-Top: To make the pop-up box vertical align. Please note that the minus value always will be half of the pop-up height.
  10. Z-Index: To make pop-up window, front of another element.

I hope, now you also understand that how to middle aligns an image inside a div.

To Middle align an image inside a DIV:
CSS:
  
.product { position:relative; width:200px; height:200px; 
border:#ccc 1px solid} .product img { position:absolute; left:50%; top:50%;
margin-left:-80px; margin-top:-80px;}
HTML:
<div class="product">
<img src="images/product.jpg" width="160" height="160" 
alt="Product" /> </div>

I hope you enjoy it!

1 comment:

  1. Now I am ready to do my breakfast, afterward having my breakfast coming yet again to read further news. gmail login

    ReplyDelete

Books for you (Crafted with )