title: Vertical Alignment with in DIV tag
body: <p>
   Hi all,
    vertical-align:middle is not working in div. Can you please check the bug in my code. I want to align the text with in DIV tag without using top,left properties.Please reply as soon as possible.....
  Thanks in advance,
  </p>
  <p><b>Here is my code.....</b></p>
  <pre><code> &lt;!DOCTYPE HTML&gt;
      &lt;HTML&gt;
      &lt;HEAD&gt;
      &lt;TITLE&gt; New Document &lt;/TITLE&gt;
      &lt;META NAME=&quot;Generator&quot; CONTENT=&quot;EditPlus&quot;&gt;
      &lt;META NAME=&quot;Author&quot; CONTENT=&quot;&quot;&gt;
      &lt;META NAME=&quot;Keywords&quot; CONTENT=&quot;&quot;&gt;
      &lt;META NAME=&quot;Description&quot; CONTENT=&quot;&quot;&gt;
      &lt;style&gt;
      body{
      font-size:0.7em;
      font-family:Arial;
      }
      .TimeFrame,.YearFrame,.QuarterFrame,.MonthFrame,.Year,.Quarter,.Month,.PrevYear,.NextYear{
       position:absolute;
       height:20px;
      }
      .YearFrame,.QuarterFrame,.MonthFrame{
        border:1px solid black; 
        border-radius:4px;   
      }
      
      .TimeFrame{
       top:10px;
       width:716px;
      }
      
      .YearFrame{    
        width:145px;  
        left:17px;
      }
      
      .QuarterFrame{
        width:121px;  
        left:200px;
      }
      
      .MonthFrame{
       width:439px;
       left:330px;
      }
      
      .Year,.Quarter,.Month{
        cursor:pointer;
        border-right:1px solid black;
        vertical-align:middle;
      }
      .Year{
       padding:0px 8px; 0px 8px;
      }
      .Quarter{
       padding:0px 5px; 0px 5px;
      }
      
      .Month{
       padding:0px 6px; 0px 6px;
      }
      
      .PrevYear{
        left:0px;
        top:2px;
      }
      .NextYear{
        left:165px;
        top:2px;
      }
      
      &lt;/style&gt;
      &lt;/HEAD&gt;
      
      &lt;BODY&gt;
      &lt;div class=&quot;TimeFrame&quot;&gt;
      &lt;div class=&quot;PrevYear&quot;&gt;&lt;img src=&quot;round_arrow_left.png&quot; alt=&quot;Previous&quot; title=&quot;Previous&quot;&gt;&lt;/div&gt;
      
      &lt;div class=&quot;YearFrame&quot;&gt;
       &lt;div class=&quot;Year&quot; style=&quot;left:1px;&quot;&gt;2000&lt;/div&gt;
       &lt;div class=&quot;Year&quot; style=&quot;left:49px;&quot;&gt;2001&lt;/div&gt;
       &lt;div class=&quot;Year&quot; style=&quot;left:97px;border:none;&quot;&gt;2002&lt;/div&gt; 
      &lt;/div&gt;
      &lt;div class=&quot;NextYear&quot;&gt;&lt;img src=&quot;round_arrow_right.png&quot; alt=&quot;Next&quot; title=&quot;Next&quot;&gt;&lt;/div&gt;
      
      &lt;div class=&quot;QuarterFrame&quot;&gt;
       &lt;div id=&quot;Q1&quot; class=&quot;Quarter&quot; style=&quot;left:1px;&quot;&gt;Q1&lt;/div&gt;
       &lt;div id=&quot;Q2&quot; class=&quot;Quarter&quot; style=&quot;left:31px;&quot;&gt;Q2&lt;/div&gt;
       &lt;div id=&quot;Q3&quot; class=&quot;Quarter&quot; style=&quot;left:61px;&quot;&gt;Q3&lt;/div&gt;
       &lt;div id=&quot;Q4&quot; class=&quot;Quarter&quot; style=&quot;left:91px;border:none;&quot;&gt;Q4&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&quot;MonthFrame&quot;&gt;
       &lt;div id=&quot;JAN&quot; class=&quot;Month&quot; style=&quot;left:1px;&quot;&gt;Jan&lt;/div&gt;
       &lt;div id=&quot;FEB&quot; class=&quot;Month&quot; style=&quot;left:37px;&quot;&gt;Feb&lt;/div&gt;
       &lt;div id=&quot;MAR&quot; class=&quot;Month&quot; style=&quot;left:74px;&quot;&gt;Mar&lt;/div&gt;
       &lt;div id=&quot;APR&quot; class=&quot;Month&quot; style=&quot;left:111px;&quot;&gt;Apr&lt;/div&gt;
       &lt;div id=&quot;MAY&quot; class=&quot;Month&quot; style=&quot;left:146px;&quot;&gt;May&lt;/div&gt;
       &lt;div id=&quot;JUN&quot; class=&quot;Month&quot; style=&quot;left:185px;&quot;&gt;Jun&lt;/div&gt;
       &lt;div id=&quot;JUL&quot; class=&quot;Month&quot; style=&quot;left:221px;&quot;&gt;Jul&lt;/div&gt;
       &lt;div id=&quot;AUG&quot; class=&quot;Month&quot; style=&quot;left:252px;&quot;&gt;Aug&lt;/div&gt;
       &lt;div id=&quot;SEP&quot; class=&quot;Month&quot; style=&quot;left:290px;&quot;&gt;Sep&lt;/div&gt;
       &lt;div id=&quot;OCT&quot; class=&quot;Month&quot; style=&quot;left:328px;&quot;&gt;Oct&lt;/div&gt;
       &lt;div id=&quot;NOV&quot; class=&quot;Month&quot; style=&quot;left:363px;&quot;&gt;Nov&lt;/div&gt;
       &lt;div id=&quot;DEC&quot; class=&quot;Month&quot; style=&quot;left:401px;border:none;&quot;&gt;Dec&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/BODY&gt;
      
      &lt;/HTML&gt;
  </code></pre>