Solved

Align table absolute center

Posted on 2010-11-19
14
544 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 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