Solved

Align table absolute center

Posted on 2010-11-19
14
525 Views
Last Modified: 2012-05-10
I need to align a table absolute center on a page.

I tried to create a table (and div) at 100% height and width then place a table inside that aligned center and middle but only the table appeared central horizontally but top vertically.


<body>
<table width="900" border="0" cellpadding="0" cellspacing="0" class="content">
  <tr>
    <td align="center" valign="middle">dummy copy</td>
  </tr>
</table>
</body>



} .content {
      height: 100%;
      width: 100%;
}


Any ideas how to achieve this??
0
Comment
Question by:BrighteyesDesign
  • 4
  • 4
  • 4
  • +2
14 Comments
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34171521
Assign your table a CSS attribute of vertical-align:middle
0
 

Author Comment

by:BrighteyesDesign
ID: 34171634
Thanks for your response,

I tried that with no joy.

In Dreamweaver everything appears central but when viewed in a browser it aligns top





<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="content">
  <tr>
    <td><table width="900" border="0" align="center" cellpadding="0" cellspacing="0" class="holder">
      <tr>
        <td><img src="images/lp1.jpg" width="930" height="561" alt="portrait photography" /></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>




body {
      background-color: #999;
      margin: 0px;
      padding: 0px;


} .content {
      height: 100%;
      width: 100%;
}
.holder {
      vertical-align: middle;
}

Screen-shot-2010-11-19-at-10.22..png
Screen-shot-2010-11-19-at-10.24..png
0
 
LVL 3

Expert Comment

by:boraganesh
ID: 34171654
in css use vertical-align="middle"
0
 

Author Comment

by:BrighteyesDesign
ID: 34171716
I already have?

body {
      background-color: #999;
      margin: 0px;
      padding: 0px;


} .content {
      height: 100%;
      width: 100%;
}
.holder {
      vertical-align: middle;
}
0
 
LVL 3

Expert Comment

by:boraganesh
ID: 34171729
can you please share the URL
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34171787
You are assigning your vertical align to the TD, not to the table.

Try converting your content element into a DIV, and aligning the whole table into a vertical-align:middle;

<div class="content">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="holder">
  <tr>
    <td><table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="images/lp1.jpg" width="930" height="561" alt="portrait photography" /></td>
      </tr>
    </table></td>
  </tr>
</table>
</div>
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34171799
Maybe this is more correct?

<div class="content">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="holder">
  <tr>
    <td>
      <img src="images/lp1.jpg" width="930" height="561" alt="portrait photography" /></td>
    </td>
  </tr>
</table>
</div>
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:BrighteyesDesign
ID: 34172041
Thanks all!

Here's the page http://www.brighteyesdesign.co.uk/libertine/

Couldn't get it working with those codes Bardo, thanks though!
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34172124
Maybe your content class is only spawning to cover the space of real content... I've seen this before in some browsers.

try to add min-height:auto; to your content class.

To debug this behaviours usually is useful to add borders to all objects on the display, so you can see how they are positioned and spawned.

Could you please add borders with different colors to your objects and add here a screenshot of the result?
0
 
LVL 3

Expert Comment

by:boraganesh
ID: 34172135
<table class="content" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
    <td align="center">
<img src="Untitled%20Document_files/lp1.jpg" alt="portrait photography" width="930" height="561"></td>
      </tr>
</table>
0
 

Author Comment

by:BrighteyesDesign
ID: 34173604
I had a look around and have found the answer:


 body{ height:100% }

  div.fullscreen{
    display:block;

    position:absolute;
    top:0;
    left:0;
      
    width:100%;
      height:100%;
      
background:#eee;
      
      text-align:center;
      padding-top:25%;
  }



<div class="fullscreen">
  <p>Here is my div content!!</p>
  <p>Put anything you want in here...</p>
</div>
0
 
LVL 4

Expert Comment

by:docnica
ID: 34177520
ok it is because your using the wrong CSS. to aling a div at the center just use:

<div style="width:400px; margin-left:auto: margin-right:auto;"...

this will always center your page. To have it vertically centered is another thing, that needs lots of workaround to be compatible with all browsers.
0
 
LVL 6

Accepted Solution

by:
kmead6 earned 500 total points
ID: 34180432
Center a div horizontally and vertically: http://www.sitecrafting.com/blog/to-center-div/
0
 
LVL 3

Expert Comment

by:boraganesh
ID: 34182635
yes , suggested solution is better
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now