| How many of you have searched Google for | | | | 300×120 and placed it in the center of the |
| “dead center align” or “vertical center | | | | browser. Now, we need to have some text inside |
| css” and found results showing more than a | | | | this wrapper div which should be again centered |
| million pages only to realize that most of them | | | | inside div both vertically and horizontally. In this case, |
| don’t give you the right solution you are looking | | | | we need to use some browser hacks and tricks. See |
| for? Well, vertical centering has always been a | | | | the html code and we have now additional div tags |
| nightmare for designers and developers. The solution | | | | to wrap the text and styles targeting different |
| we are looking at is not just limited to aligning text | | | | browsers. |
| vertically center inside a container or a div tag. We | | | | #box>#floating { /*display:table for Mozilla & Opera* |
| need to vertically and horizontally center a div | | | | display:table;position:static; |
| container in a browser. We need to align an object (a | | | | } |
| div or a table) whose height is unknown, inside a div. | | | | #floating { /*for IE* |
| The concept of aligning a div vertically center in a | | | | width:300px;height:100%;position:relative; |
| browser is pretty simple. It is achieved by absolutely | | | | } |
| positioning a div in half of the area height and moving | | | | #floating div { /*for IE* |
| up by half of its height. This is possible when you | | | | position:absolute;top:50%;left:0px;width:100%; |
| know the height of the div. Let’s see how it | | | | } |
| works. Here is the css style defined for the wrapper | | | | #floating>div { /*for Mozilla and Opera* |
| div with an ID “box”. The important thing to | | | | display:table-cell;vertical-align:middle;position:static; |
| note here is the “left” and “top” | | | | } |
| parameters. These values are defined in percentage | | | | #floating div div {position:relative;top:-50%; |
| values. This really helps you to position a div in the | | | | } |
| center even when you don’t know the | | | | The text is vertically and horizontally aligned centeras |
| resolution of the browser screen. The top-left corner | | | | is the wrapper div. You can use a table as well |
| of the div is now sits in the center point of the | | | | without a height. |
| browser. The next thing to do is move up the div | | | | Now what do you do when you want to vertically |
| half of its height and move left the div half of its | | | | align a div or table whose height is not pre-defined? |
| width. This way the center point of the div is aligned | | | | Simple! Set the height of the wrapper div to 100% |
| to the center point of the browser. This is done by | | | | and remove “top” and “margin-top” |
| defining negative values for “margin-top” and | | | | attributes. Now in the above html code, remove the |
| “margin-left” attributes. See the css below. | | | | text with a table or a div tag which doesn’t |
| #box | | | | have a defined height. It works! Download the code |
| ter; | | | | and experiment it yourselves. If you found something |
| } | | | | more interesting, let us all know. Hope it helped. |
| We have formed a div with a dimension of | | | | |