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,160
    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.

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

    Thanks, but nothing happens.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,160
    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.

  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