Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 461
  • Last Modified:

How to have my table or form always centered when zoom in or zoom out?

Hi, when I zoom in or out in browser my web page content would seem to be anchored on the left and expand outward to the right.  How can I center this so no matter if people are zooming in or out my content area, table or form, would stay centered?  Also would this work for different resolution too?  Thank you,
0
lapucca
Asked:
lapucca
  • 5
  • 5
  • 3
2 Solutions
 
Tom BeckCommented:
Try this:

In the beginning of your css file, start with these two definitions.

* {margin:0 auto 20px auto; padding:0;}
body {text-align:center;}

That should center horizontally.

To center vertically as well, takes some client side script. Here's a jquery example using divs. You will have to adjust as necessary for your page layout.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>

<script type="text/javascript">

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame() 
{
    var divHeight = 300;
    var h = $(window).height();
    var w = $(window).width();
    $("#content").css('margin-top', (h > divHeight) ? ((h - divHeight)/2) : 20)
}
 </script>
<title>Untitled Page</title>
</head>
<body>
<div id="wrapper" style="width:100%;height:100%;border:solid 2px black;">
<div id="content" style="margin:10px;width:98%;height:300px;border:solid 2px green;"></div>
</div>
</body>
</html>

Open in new window

0
 
DanielleFavreauCommented:
tommyBoy stated to use this:

* {margin:0 auto 20px auto; padding:0;}
body {text-align:center;}

The problem with doing that is that with an asterisk you are making every single item on a page have a margin of top = 0 px, right/left = auto, and bottom = 20 px.  Then with body, you're aligning all of the text in the entire site center.

That means that all of your paragraphs will have 20 pixels of space under, navigation items, form items, every single thing at the site.

It is never ideal to use * for styling, except to clear the slate:

* { margin: 0; padding: 0; }

That removes all of the default padding and margins that the browsers put in (IE especially).

For your particular question, instead of affecting all the code at your site, just put a div around the code you want centered:

<div>
[[table or form code]
</div>

Give the div a unique ID like "centerft"

<div id="centerft">
[[table or form code]
</div>

Then put this declaration in your stylesheet (replacing the width with whatever the width is of your form/table):

#centerft { width: 500px; margin: 0 auto; }

That will ensure that ONLY the table/form item is horizontally centered in the screen and will not affect anything else at the site.  So your form text or table text can be aligned left, right, center, whatever you want - this code will not impact it.

If you want your whole page to be centered horizontally as well, put a div around it (after the <body> tag and before the </body> tag), call it wrapper, and do the same thing but increase the width (standard is 960 to fit in a 1024 window)

#wrapper { width: 960px; margin: 0 auto; }
0
 
Tom BeckCommented:
@DanielleFavreau,

Are you aware that all browsers put varying amounts of padding and margin on every page by default unless specfied otherwise? The next time you're scratching your head about why your navigation buttons won't center in FF but look fine in Chrome, think about what I've said here. I don't know about you, but I like to set the starting point myself right from the beginning of any web page design rather than leave it up to the browser designer. You start with your content wrapper centered in the browser window and set the location of each element relative to the inside of the wrapper. The asker did not provide any css or html, so you cannot assume that it will affect everything on the page. Any padding and margin that the asker adds to the elements on the page will override this initial setting anyway. It's a perfectly valid way to start any stylesheet and is very common. The only thing I agree with in your comment is that the content should be in a wrapper.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
DanielleFavreauCommented:
Yes tommyBoy, that's why I said:

It is never ideal to use * for styling, except to clear the slate:

* { margin: 0; padding: 0; }

That removes all of the default padding and margins that the browsers put in (IE especially).

Your comment stated "* {margin:0 auto 20px auto; padding:0;}", which applies left/right auto margins and a 20px bottom margin to all items on the page.

That would mean that you would then need to go into each item and remove the bottom, left, and right, margins individually as you wouldn't always want a 20px bottom margin and you wouldn't always want everything centered.
0
 
Tom BeckCommented:
You're splitting hairs. To the point of the question, you "auto" left and right to center the content horizontally, both your suggestion and mine. That's the easy part. The tougher part is centering vertically.
0
 
DanielleFavreauCommented:
Here are two ways to center vertically and horizontally - one with CSS only and one with JQuery and CSS.  For the CSS method you must know the height of the DIV.  For the JQuery version Javascript must be turned on for it to work. Rather than retype my version of it, here it is from the source, this is courtesy of Martin Angelov, link at the bottom to the original article.

Horizontal and vertical centering with CSS

Center a div both horizontally and vertically with CSS is a bit more tricky. You need to know the dimensions of the div beforehand.

      .className{
          width:300px;
          height:200px;
          position:absolute;
          left:50%;
          top:50%;
          margin:-100px 0 0 -150px;
      }

By positioning the element absolutely, we can detach it from its surroundings and specify its position in relation to the browser window. Offsetting the div by 50% from the left and the top part of the window, you have its upper-left corner precisely at the center of the page. The only thing we are left to do is to move the div to the left and to the top with half its width and height with a negative margin, to have it perfectly centered.

Horizontal and vertical centering with jQuery

As mentioned earlier – the CSS method only works with divs with fixed dimensions. This is where jQuery comes into play:

      $(window).resize(function(){
      
          $('.className').css({
              position:'absolute',
              left: ($(window).width() - $('.className').outerWidth())/2,
              top: ($(window).height() - $('.className').outerHeight())/2
          });
      
      });
      
      // To initially run the function:
      $(window).resize();

The functionality is inserted into a $(window).resize() statement, which is executed every time the window is resized by the user. We use outerWidth() and outerHeight(), because unlike from the regular width() and height(), they add the padding and the border width to the returned size. Lastly, we simulate a resize event to kick center the div on page load.

The benefit of using this method, is that you do not need to know how big the div is. The main disadvantage is that it will only work with JavaScript turned on. This however makes it perfect for rich user interfaces (such as facebook’s).

(See the relevant examples at the source's site: http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/)
0
 
lapuccaAuthor Commented:
Hi, I only use the table to help position stuff.  I only want all the stuff to stay center in different resolution and when user zoom in and out.  I do not want text or whatever to align center.  I also don't need vertical centering of the table.  I'm not using any other CSS so attached is my aspx file.
Daniel, i tried using your method but my stuff doesn't come up centered.  Please see the attached screen shot.  
I used 3 table cells and center cell is blank but supposed to have width of 20% but it's not showing any space between the 2 charts.  I want the 2nd cell to be a spacer.  

Thank you both.
0
 
lapuccaAuthor Commented:
Sorry, here are the attachments
table.jpg
BiWeeklyResponse.aspx
0
 
Tom BeckCommented:
It's difficult to say what this will do to the charts once they are rendered to the page without seeing the source from the rendered page, but if you do something like this it will get the charts centered on the page at any zoom or resolution. The key is the "auto" in the margin setting. The 3px is just a little padding and margin which may have to be adjusted. Anyway you can try this and see what you get:

<style type="text/css">
        * {margin:3px auto;padding:3px;}
        div.centerer{ width:100%; margin: 0 auto;}
    </style>

Post the source behind the rendered page and I can be more specific.
0
 
DanielleFavreauCommented:
Attached is your completed code.  No tables, divs only, padding between your charts, everything horizontally centered.
charts.htm
0
 
Tom BeckCommented:
@Lapucca

Before you rewrite your entire layout, please just try this simple fix.
<style type="text/css">
        * {margin:3px auto;padding:3px;}
        div.centerer{ width:100%; margin: 0 auto;}
    </style>

It will center the layout you have AND fix this issue as well:

>> center cell is blank but supposed to have width of 20% but it's not showing any space between the 2 charts

I think you will find however that 20% of the window width is too much, but that's an easy fix. Just change your center td to something less than 20%.

If you need to adjust margins and padding on individual elements, we can work on that afterward.
0
 
lapuccaAuthor Commented:
Hi, both of your solution works.  Thank you both very much for the help.  I really appreciate it.
0
 
DanielleFavreauCommented:
Thank you for taking the time to review my answers.  All the best.
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.

  • 5
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now