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

CSS - Center a

Expand Messages
  • wilkinsonm
    Is there any way to horizontally center a using CSS positioning? I would like to center a large division in the middle of the browser window so that it
    Message 1 of 4 , May 3, 2002
    • 0 Attachment
      Is there any way to horizontally center a <div> using CSS
      positioning? 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.

      Thanks!

      Mike Wilkinson
      http://websites-graphics.biz
    • 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 2 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 3 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 4 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.