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.
.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.
- Width: Using for pop-up window.
- Height: Using for pop-up height
- Background: for pop-up background color
- Border: For pop-up box color
- Position: To make an absolute position of the pop-up box.
- Left: To position the pop-box in the half of the browser window from left side.
- Top: To position the pop-box in the half of the browser window from top side.
- 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.
- 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.
- 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;HTML:
border:#ccc 1px solid} .product img { position:absolute; left:50%; top:50%;
margin-left:-80px; margin-top:-80px;}
<div class="product"> <img src="images/product.jpg" width="160" height="160"
alt="Product" /> </div>
I hope you enjoy it!
Now I am ready to do my breakfast, afterward having my breakfast coming yet again to read further news. gmail login
ReplyDeletecool tips, thanks
ReplyDeleteaz-500 Questions Answers - Free Microsoft Microsoft Azure Security Technologies Exam Questions & Dumps. 100% Free AZ-500 ETE Files With Updated and Accurate Questions & Answers
ReplyDelete