Loading ...
Sorry, an error occurred while loading the content.

Re: [NH] CSS - Center a

Expand Messages
  • Ron Woodall
    Hi Mike: ... There are a bunch of attributes that deal with alignment at the HTML level. Go to the tag in the Compendium and look for align=. Then follow
    Message 1 of 4 , May 3, 2002
    • 0 Attachment
      Hi Mike:

      At 12:19 PM 5/3/02 +0000, you wrote:
      >Is there any way to horizontally center a <div> using CSS
      >positioning?

      There are a bunch of attributes that deal with alignment at the
      HTML level. Go to the <div> tag in the Compendium and look for align=. Then
      follow the links to the working examples and you'll see it working. Resize
      the popup and you'll see the constant centering effect.

      Next, go to the CSS --> Properties listing of the Compendium down
      to the text-align property. Again, scroll down and you'll see "text-align:
      center" and you'll see a working example there. Resize the popup as
      necessary to see the effect.

      >I would like to center a large division in the middle of
      >the browser window so that it is always centered, even if a visitor's
      >window is very large. Then, within that large division, I want to use
      >CSS positioning to place other divisions with images, text, etc.
      >
      >This is easy when everything is referenced to the upper left-hand
      >corner of the window. However, even using JavaScript, I can not
      >figure a way to center.

      That takes care of the horizontal centering but if you're talking
      about centering from the top of the window to the bottom, you've got a big
      headache with that one. If you figure out vertical centering, let me know.
      I could sure use it.

      I hope this helps.

      Ron Woodall

      ---------------------------------------
      Ron Woodall
      nor@...

      The Compendium of HTML Elements
      "your essential web publishing resource"

      - available at/disponible à:
      http://au.htmlcompendium.org/index.htm (Australia)
      http://www.htmlcompendium.org/index.htm (Europe and North America)
    • wilkinsonm
      Thanks for the great responses! After much searching, I figured out an unsophisticated solution. You can see the code here:
      Message 2 of 4 , May 3, 2002
      • 0 Attachment
        Thanks for the great responses!

        After much searching, I figured out an unsophisticated solution. You
        can see the code here: <a href="http://websites-
        graphics.biz/centered.htm">http://websites-
        graphics.biz/centered.htm</a>.

        This particular solution is very simple, and it's not dynamic. If a
        visitor were to resize their browser window, the page would have to
        be re-loaded in order to re-center the division.

        The same approach could be used to vertically center a division. Use
        the JavaScript property "innerHeight" and the JScript
        property "document.body.clientHeight."

        I only know that this works with IE5.5 and NS6.2.

        Best wishes,

        Mike Wilkinson
        http://websites-graphics.biz
      • wilkinsonm
        Hi Ron, Thanks for the link to the Compendium. I added it to my Favorites right away! Regarding the HTML tag within it and
        Message 3 of 4 , May 3, 2002
        • 0 Attachment
          Hi Ron,

          Thanks for the link to the Compendium. I added it to my Favorites
          right away!

          Regarding the HTML tag <div align=
          If you put another <div> within it and use absolute positioning, the
          nested <div> position references to the upper left-hand corner of the
          window, not the upper left-hand corner of the "parent" <div>, which
          is what I want.

          Regarding the CSS property text-align: center
          This is mainly aimed at text and images. I have found that using it
          to center whole divisions works in some browsers, not others.

          If you check the link I provided, you will see a simplistic version
          that uses JavaScript and does what I want. My original reply mangled
          the link, so here it is again:
          http://websites-graphics.biz/centered.htm

          Thanks!

          Mike Wilkinson
          http://websites-graphics.biz
        Your message has been successfully submitted and would be delivered to recipients shortly.