6 Replies Latest reply on Sep 27, 2008 7:32 PM by Newsgroup_User

    Absolute Positioning vs Text-Align

    Level 7
      When I display the following, the text is centered:

      <div style="text-align: center;">Some Text</div

      But when I add absolute positioning, text-align is rendered null and void:

      <div style="text-align: center; position: absolute; top: 0;">Some Text</div>

      How do you center text in an absolutely positioned div?

      Thanks.

      --
      David Blomstrom: PolITics Expert
      http://www.geobop.org/ | http://www.invisible-republic.org/
      http://www.billysoft.org/ (M$)
      http://www.freedomware.us/Topics/Mac_vs_PC/
        • 1. Re: Absolute Positioning vs Text-Align
          Level 7
          "David Blomstrom" <webforumsuser@macromedia.com> wrote in message
          news:gbmav2$lp5$1@forums.macromedia.com...
          > When I display the following, the text is centered:
          >
          > <div style="text-align: center;">Some Text</div
          >
          > But when I add absolute positioning, text-align is rendered null and void:
          >
          > <div style="text-align: center; position: absolute; top: 0;">Some
          > Text</div>
          >
          > How do you center text in an absolutely positioned div?

          You will need to give that DIV a width


          --
          Thierry
          http://www.TJKDesign.com/go/?0 | Articles and Tutorials


          http://divahtml.com/products/scripts_dreamweaver_extensions.php | Extensions
          that keep your markup clean
          http://www.fourlevel.com/ | CSS Menus, Gallery, Tab Panels, etc
          --

          • 2. Re: Absolute Positioning vs Text-Align
            Level 7
            Hello,

            The text is centering in the div.
            Add a width and border to see it:

            <div style="text-align: center; width: 200px; border: 1px solid #000;
            position: absolute; top: 0;">Some Text</div>

            In your first example, the div with no absolute position is, by default, the
            full width of the browser window so when the text centers in the middle of
            the div, it's centered in the middle of the browser window.
            Could you give more details on what you're trying to do?
            I don't understand where the absolute position comes in.

            Take care,
            Tim




            "David Blomstrom" <webforumsuser@macromedia.com> wrote in message
            news:gbmav2$lp5$1@forums.macromedia.com...
            > When I display the following, the text is centered:
            >
            > <div style="text-align: center;">Some Text</div
            >
            > But when I add absolute positioning, text-align is rendered null and void:
            >
            > <div style="text-align: center; position: absolute; top: 0;">Some
            > Text</div>
            >
            > How do you center text in an absolutely positioned div?
            >
            > Thanks.
            >
            > --
            > David Blomstrom: PolITics Expert
            > http://www.geobop.org/ | http://www.invisible-republic.org/
            > http://www.billysoft.org/ (M$)
            > http://www.freedomware.us/Topics/Mac_vs_PC/


            • 3. Re: Absolute Positioning vs Text-Align
              Level 7
              TC2112 wrote:
              > Hello,
              >
              > The text is centering in the div.
              > Add a width and border to see it:
              >
              > <div style="text-align: center; width: 200px; border: 1px solid #000;
              > position: absolute; top: 0;">Some Text</div>
              >
              > In your first example, the div with no absolute position is, by default, the
              > full width of the browser window so when the text centers in the middle of
              > the div, it's centered in the middle of the browser window.
              > Could you give more details on what you're trying to do?
              > I don't understand where the absolute position comes in.

              I used a Dreamweaver generated page (1-Column Elastic, Centered, Header
              & Footer) and inserted some navigation links at the top of the page.
              There was a gap between the container and the top of the page. I
              couldn't figure out what was causing it, but I wanted to put my links there.

              But they created their own gap/space, so I stuck them between the
              container and the header and assigned absolute positioning. Maybe I
              should go back and try to fix it with a negative margin (e.g.
              margin-bottom: -25px) instead.

              Now that I've assigned the div a width, the text is indeed centered. The
              only problem is that the div itself is aligned to the right. Actually,
              it's only slightly to the right now that I reduced the width to 80%.

              Thanks.

              * * * * *

              <body class="oneColElsCtrHdr">
              <div id="container">

              <div id="topsections" style="width: 80%; margin: 0 auto; padding: 0;
              background: #ff0; font-size: 75%; text-align: center; position:
              absolute; top: 0;">

              <div id="header">

              --
              David Blomstrom: PolITics Expert
              http://www.geobop.org/ | http://www.invisible-republic.org/
              http://www.billysoft.org/ (M$)
              http://www.freedomware.us/Topics/Mac_vs_PC/
              • 4. Re: Absolute Positioning vs Text-Align
                Level 7
                OK, I just found another solution:

                <div id="topsections" style="width: 80%; margin: 0 auto -25px; padding:
                0; font-size: 75%; text-align: center;position: relative; bottom: 25px;">

                But thanks for the tip about assigning widths to absolutely positioned
                div's before centering the text. I've run into this problem before, so
                I'm glad I finally know the solution. :)

                --
                David Blomstrom: PolITics Expert
                http://www.geobop.org/ | http://www.invisible-republic.org/
                http://www.billysoft.org/ (M$)
                http://www.freedomware.us/Topics/Mac_vs_PC/
                • 5. Re: Absolute Positioning vs Text-Align
                  Level 7
                  Hello,

                  Most likely, the gaps you were seeing were because the margins for the body
                  and possibly the nav, if it was a UL, and maybe an H tag weren't zeroed out
                  using CSS.

                  The negative margin might be problematic in some cases.
                  If you'd like, post a link to the page with the gaps you were seeing and
                  we'll take a look.
                  There may be an easier, more robust fix.

                  Take care,
                  Tim

                  "David Blomstrom" <webforumsuser@macromedia.com> wrote in message
                  news:gbmcdg$ne0$1@forums.macromedia.com...
                  > TC2112 wrote:
                  >> Hello,
                  >>
                  >> The text is centering in the div.
                  >> Add a width and border to see it:
                  >>
                  >> <div style="text-align: center; width: 200px; border: 1px solid #000;
                  >> position: absolute; top: 0;">Some Text</div>
                  >>
                  >> In your first example, the div with no absolute position is, by default,
                  >> the full width of the browser window so when the text centers in the
                  >> middle of the div, it's centered in the middle of the browser window.
                  >> Could you give more details on what you're trying to do?
                  >> I don't understand where the absolute position comes in.
                  >
                  > I used a Dreamweaver generated page (1-Column Elastic, Centered, Header &
                  > Footer) and inserted some navigation links at the top of the page. There
                  > was a gap between the container and the top of the page. I couldn't figure
                  > out what was causing it, but I wanted to put my links there.
                  >
                  > But they created their own gap/space, so I stuck them between the
                  > container and the header and assigned absolute positioning. Maybe I should
                  > go back and try to fix it with a negative margin (e.g.
                  > margin-bottom: -25px) instead.
                  >
                  > Now that I've assigned the div a width, the text is indeed centered. The
                  > only problem is that the div itself is aligned to the right. Actually,
                  > it's only slightly to the right now that I reduced the width to 80%.
                  >
                  > Thanks.
                  >
                  > * * * * *
                  >
                  > <body class="oneColElsCtrHdr">
                  > <div id="container">
                  >
                  > <div id="topsections" style="width: 80%; margin: 0 auto; padding: 0;
                  > background: #ff0; font-size: 75%; text-align: center; position: absolute;
                  > top: 0;">
                  >
                  > <div id="header">
                  >
                  > --
                  > David Blomstrom: PolITics Expert
                  > http://www.geobop.org/ | http://www.invisible-republic.org/
                  > http://www.billysoft.org/ (M$)
                  > http://www.freedomware.us/Topics/Mac_vs_PC/


                  • 6. Re: Absolute Positioning vs Text-Align
                    Level 7
                    TC2112 wrote:
                    > Hello,
                    >
                    > Most likely, the gaps you were seeing were because the margins for the body
                    > and possibly the nav, if it was a UL, and maybe an H tag weren't zeroed out
                    > using CSS.
                    >
                    > The negative margin might be problematic in some cases.
                    > If you'd like, post a link to the page with the gaps you were seeing and
                    > we'll take a look.
                    > There may be an easier, more robust fix.
                    >
                    > Take care,
                    > Tim
                    >

                    Thanks for the offer. I'll try to get it online tomorrow, but it's part
                    of a fairly big, complex, multi-site upgrade. I can't publish it online
                    until I'm sure none of my revised files are going to blow up online. :)