www.webdeveloper.com
Results 1 to 5 of 5

Thread: Vertical-align table inside div

  1. #1
    Join Date
    Apr 2005
    Posts
    210

    Vertical-align table inside div

    Code:
    <head>
    <style type="text/css">
    
    div#myOuter
    {
    	position:		absolute;
    	left:			100;
    	top:			100px;
    	width:			500px; 
    	height:			400; 
    	background:		#00FFFF;
    
    	margin:auto;
    
    	align:			center;
    	vertical-align:	middle;
    	display:		table-cell;
    }
    
    table#myTable
    {
    	margin:0 auto;
    
    	width:80%; 
    	background: #FFFF00;
    }
    
    </style>
    </head>
    
    <br>
    <br>
       
    <div id="myOuter">
         <table id="myTable">
          <tr>
           <td>gggggggggggg</td>
            <td>gggggggggggg</td>
         </tr>
          <tr>
           <td>nnnnnnnnn</td>
           <td >nnnnnnnnn</td>
          </tr>
         </table>
    </div>
    Vertical-align is not working.
    position: absolute of the div can't be removed in my project.

    Please help.

    .

  2. #2
    Join Date
    Mar 2011
    Posts
    1,145
    Start by adding "px" to the 'left' and 'height' settings and removing the 'align' setting in #myOuter. Then run your code through a CSS and HTML validator.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Apr 2005
    Posts
    210
    rtrethewey,

    Thanks, but nothing happens.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,145
    Sorry. I was in a rush and just spotted some syntax errors that might have been a problem.

    The bad news is that you can't vertically center dynamic elements with CSS. The good news is that you can vertically center elements with fixed dimensions, although it takes a bit of doing and some understanding of CSS positioning. See my article on Centering Elements with CSS. The trick for vertical centering is at the bottom.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Apr 2005
    Posts
    210
    Hi rtrethewey,

    centering text and div Inside a <div> is easier, I can center them well.

    Problem is that table can not be centered inside a div if the div has style="position: absolute;"

    This is what I want to do.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles