[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Align table absolute center

Posted on 2010-11-19
14
Medium Priority
?
568 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

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.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…
Suggested Courses

650 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