Solved

Align table absolute center

Posted on 2010-11-19
14
541 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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
 

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

809 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