Vertical Alignment with in DIV tag

html css vertical-alignment

11,734

It's possible to use vertical-align:middle combined with display:table-cell to achieve this effect.

I wrapped each of your Years in a span and used this CSS:

.Year {
  display:table;
}
.Year span {
  display:table-cell;
  vertical-align:middle;
}

See fiddle here: http://jsfiddle.net/stephendavis89/7QPx8/1/ (only the years are vertically centered)

P.S. You might want to consider left floating your years, quarters, and months instead of left positioning them.

11,734

Author by

Rama Rao M

Updated on June 04, 2022

Comments

Rama Rao M almost 2 years

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,

Here is my code.....

 <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style>
    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;
    }
    
    </style>
    </HEAD>
    
    <BODY>
    <div class="TimeFrame">
    <div class="PrevYear"><img src="round_arrow_left.png" alt="Previous" title="Previous"></div>
    
    <div class="YearFrame">
     <div class="Year" style="left:1px;">2000</div>
     <div class="Year" style="left:49px;">2001</div>
     <div class="Year" style="left:97px;border:none;">2002</div> 
    </div>
    <div class="NextYear"><img src="round_arrow_right.png" alt="Next" title="Next"></div>
    
    <div class="QuarterFrame">
     <div id="Q1" class="Quarter" style="left:1px;">Q1</div>
     <div id="Q2" class="Quarter" style="left:31px;">Q2</div>
     <div id="Q3" class="Quarter" style="left:61px;">Q3</div>
     <div id="Q4" class="Quarter" style="left:91px;border:none;">Q4</div>
    </div>
    
    <div class="MonthFrame">
     <div id="JAN" class="Month" style="left:1px;">Jan</div>
     <div id="FEB" class="Month" style="left:37px;">Feb</div>
     <div id="MAR" class="Month" style="left:74px;">Mar</div>
     <div id="APR" class="Month" style="left:111px;">Apr</div>
     <div id="MAY" class="Month" style="left:146px;">May</div>
     <div id="JUN" class="Month" style="left:185px;">Jun</div>
     <div id="JUL" class="Month" style="left:221px;">Jul</div>
     <div id="AUG" class="Month" style="left:252px;">Aug</div>
     <div id="SEP" class="Month" style="left:290px;">Sep</div>
     <div id="OCT" class="Month" style="left:328px;">Oct</div>
     <div id="NOV" class="Month" style="left:363px;">Nov</div>
     <div id="DEC" class="Month" style="left:401px;border:none;">Dec</div>
    </div>
    </div>
    </BODY>
    
    </HTML>