?
Solved

Align table absolute center

Posted on 2010-11-19
14
Medium Priority
?
560 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 

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 2000 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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

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.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

741 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