Vertical-align table inside div

**html20009876** · 04-21-2012 07:42 AM

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.

.

**rtrethewey** · 04-21-2012 10:57 AM

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.

**html20009876** · 04-21-2012 11:51 AM

rtrethewey,

Thanks, but nothing happens.

**rtrethewey** · 04-21-2012 09:01 PM

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.

**html20009876** · 04-23-2012 08:39 AM

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: Vertical-align table inside div

Thread Tools

Display

Vertical-align table inside div

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions