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

Re: [NH] vertical alignment of text

Expand Messages
  • sisterscape
    First off you misspelled vertical in verticle-align . ;) (I don t understand why you have it attached to the element either.) In any case, it won t work.
    Message 1 of 7 , Feb 12, 2005
    • 0 Attachment
      First off you misspelled vertical in 'verticle-align'. ;) (I don't
      understand why you have it attached to the <p> element either.) In any
      case, it won't work. Here's an explanation from CSS guru Paul O'Brien
      over at SitePoint:

      "Vertical-align does not vertically align divs (it was never meant to).
      Vertical-align determines the alignment of text within a single line of
      text or within a table cell. In a table cell the middle of the element
      will align with the middle of the cell."

      I would suggest fussing with the top and bottom margins of the <p> to
      50% (or whatever percentage will achieve the desired placement).

      sisterscape


      --- "Don - htmlfixit.com" <don@...> wrote:

      > I am trying to get text to vertically align in a div so that it is
      > centered top to bottom.
      > In firefox the following behaves as I would expect:
      > <div id="subheaderright">
      > <p style='verticle-align: middle;'>
      > this is in the middle vertically
      > </p>
      >
      > and the words go right smack in the middle, but in ie, the text stays
      > in
      > the upper left corner of the div, apparently unresponsive to this
      > directive. Any help appreciated.
      >
      > Don
      >




      __________________________________
      Do you Yahoo!?
      Meet the all-new My Yahoo! - Try it today!
      http://my.yahoo.com
    • marker@us421.com
      Hi, I have good luck with text-align: center; but I use it in the , it may work in the Karen On Sat, 12 Feb 2005 19:49:58 -0800 (PST), sisterscape
      Message 2 of 7 , Feb 12, 2005
      • 0 Attachment
        Hi,
        I have good luck with

        text-align: center;

        but I use it in the <div>, it may work in the <p>

        Karen

        On Sat, 12 Feb 2005 19:49:58 -0800 (PST), sisterscape brightened my
        day with:
        > First off you misspelled vertical in 'verticle-align'. ;) (I don't
        >
        > understand why you have it attached to the <p> element either.) In
        > any
        > case, it won't work. Here's an explanation from CSS guru Paul
        > O'Brien
        > over at SitePoint:
        >
        > "Vertical-align does not vertically align divs (it was never meant
        > to).
        > Vertical-align determines the alignment of text within a single
        > line of
        > text or within a table cell. In a table cell the middle of the
        > element
        > will align with the middle of the cell."
        >
        > I would suggest fussing with the top and bottom margins of the <p>
        > to
        > 50% (or whatever percentage will achieve the desired placement).
        >
        > sisterscape
        >
        >
        > --- "Don - htmlfixit.com" <don@...> wrote:
        >
        >> I am trying to get text to vertically align in a div so that it is
        >> centered top to bottom.
        >> In firefox the following behaves as I would expect:
        >> <div id="subheaderright">
        >> <p style='verticle-align: middle;'>
        >> this is in the middle vertically
        >> </p>
        >>
        >> and the words go right smack in the middle, but in ie, the text
        >> stays
        >> in
        >> the upper left corner of the div, apparently unresponsive to this
        >> directive. Any help appreciated.
        >>
        >> Don
        >
        >
        >
        > __________________________________
        > Do you Yahoo!?
        > Meet the all-new My Yahoo! - Try it today!
        > http://my.yahoo.com
        >
        >
        > CSE HTML Validator Lite - it's free:
        > http://home.earthlink.net/~5wink/dl/cselite652.exe
        >
        > Fookes Software Home: http://www.fookes.us/redir
        >
        >
        > Yahoo! Groups Sponsor
        >
        > ADVERTISEMENT
        > document.write('');
        >
        > Yahoo! Groups Links
        >
        > To visit your group on the web, go to:
        > http://groups.yahoo.com/group/ntb-html/
        >
        > To unsubscribe from this group, send an email to:
        > ntb-html-unsubscribe@yahoogroups.com
        >
        > Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.
      • Don - htmlfixit.com
        ... That ll put my ventricals into defib! Yes you are right, good point :-) I finally caved in and put it into a table cell. I tried span first and then
        Message 3 of 7 , Feb 12, 2005
        • 0 Attachment
          sisterscape wrote:
          > First off you misspelled vertical in 'verticle-align'. ;)
          That'll put my ventricals into defib! Yes you are right, good point :-)
          I finally caved in and put it into a table cell. I tried span first and
          then tried p to get a block element on it.
        • sisterscape
          text-align: center ; in a or will center text horizontally but not vertically. ... __________________________________ Do you Yahoo!? Yahoo! Mail -
          Message 4 of 7 , Feb 12, 2005
          • 0 Attachment
            text-align: center ; in a <div> or <p> will center text horizontally
            but not vertically.

            --- marker@... wrote:

            > Hi,
            > I have good luck with
            >
            > text-align: center;
            >
            > but I use it in the <div>, it may work in the <p>
            >
            > Karen
            >
            > On Sat, 12 Feb 2005 19:49:58 -0800 (PST), sisterscape brightened my
            > day with:
            > > First off you misspelled vertical in 'verticle-align'. ;) (I don't
            > >
            > > understand why you have it attached to the <p> element either.) In
            > > any
            > > case, it won't work. Here's an explanation from CSS guru Paul
            > > O'Brien
            > > over at SitePoint:
            > >
            > > "Vertical-align does not vertically align divs (it was never meant
            > > to).
            > > Vertical-align determines the alignment of text within a single
            > > line of
            > > text or within a table cell. In a table cell the middle of the
            > > element
            > > will align with the middle of the cell."
            > >
            > > I would suggest fussing with the top and bottom margins of the <p>
            > > to
            > > 50% (or whatever percentage will achieve the desired placement).
            > >
            > > sisterscape
            > >
            > >
            > > --- "Don - htmlfixit.com" <don@...> wrote:
            > >
            > >> I am trying to get text to vertically align in a div so that it is
            > >> centered top to bottom.
            > >> In firefox the following behaves as I would expect:
            > >> <div id="subheaderright">
            > >> <p style='verticle-align: middle;'>
            > >> this is in the middle vertically
            > >> </p>
            > >>
            > >> and the words go right smack in the middle, but in ie, the text
            > >> stays
            > >> in
            > >> the upper left corner of the div, apparently unresponsive to this
            > >> directive. Any help appreciated.
            > >>
            > >> Don




            __________________________________
            Do you Yahoo!?
            Yahoo! Mail - Easier than ever with enhanced search. Learn more.
            http://info.mail.yahoo.com/mail_250
          • Grant Mackenzie
            For block in bock eg: p in div margin-top: auto; margin-bottom: auto;
            Message 5 of 7 , Feb 13, 2005
            • 0 Attachment
              For block in bock
              eg: p in div


              margin-top: auto;
              margin-bottom: auto;


              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
              <head>
              <title>test</title>
              <style type="text/css">
              div
              {
              border: thin solid red;
              height:20;px
              }
              p
              {
              margin-top: auto;
              margin-bottom: auto;
              }
              </style>

              </head>
              <body>
              <div>
              <p>
              test
              </p>
              </div>
              </body>
              </html>



              -----Original Message-----
              From: sisterscape [mailto:sisterscape@...]
              Sent: Sunday, 13 February 2005 06:12 p.m.
              To: ntb-html@yahoogroups.com
              Subject: Re: [NH] vertical alignment of text


              text-align: center ; in a <div> or <p> will center text horizontally
              but not vertically.

              --- marker@... wrote:

              > Hi,
              > I have good luck with
              >
              > text-align: center;
              >
              > but I use it in the <div>, it may work in the <p>
              >
              > Karen
              >
              > On Sat, 12 Feb 2005 19:49:58 -0800 (PST), sisterscape brightened my
              > day with:
              > > First off you misspelled vertical in 'verticle-align'. ;) (I don't
              > >
              > > understand why you have it attached to the <p> element either.) In
              > > any
              > > case, it won't work. Here's an explanation from CSS guru Paul
              > > O'Brien
              > > over at SitePoint:
              > >
              > > "Vertical-align does not vertically align divs (it was never meant
              > > to).
              > > Vertical-align determines the alignment of text within a single
              > > line of
              > > text or within a table cell. In a table cell the middle of the
              > > element
              > > will align with the middle of the cell."
              > >
              > > I would suggest fussing with the top and bottom margins of the <p>
              > > to
              > > 50% (or whatever percentage will achieve the desired placement).
              > >
              > > sisterscape
              > >
              > >
              > > --- "Don - htmlfixit.com" <don@...> wrote:
              > >
              > >> I am trying to get text to vertically align in a div so that it is
              > >> centered top to bottom.
              > >> In firefox the following behaves as I would expect:
              > >> <div id="subheaderright">
              > >> <p style='verticle-align: middle;'>
              > >> this is in the middle vertically
              > >> </p>
              > >>
              > >> and the words go right smack in the middle, but in ie, the text
              > >> stays
              > >> in
              > >> the upper left corner of the div, apparently unresponsive to this
              > >> directive. Any help appreciated.
              > >>
              > >> Don




              __________________________________
              Do you Yahoo!?
              Yahoo! Mail - Easier than ever with enhanced search. Learn more.
              http://info.mail.yahoo.com/mail_250


              CSE HTML Validator Lite - it's free:
              http://home.earthlink.net/~5wink/dl/cselite652.exe

              Fookes Software Home: http://www.fookes.us/redir



              Yahoo! Groups Sponsor
              ADVERTISEMENT






              Yahoo! Groups Links

              To visit your group on the web, go to:
              http://groups.yahoo.com/group/ntb-html/

              To unsubscribe from this group, send an email to:
              ntb-html-unsubscribe@yahoogroups.com

              Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.
            • sisterscape
              That doesn t really work either. Firefox ignores it and puts the text in the upper left. In IE it looks kind of OK until the height of the div is increased.
              Message 6 of 7 , Feb 13, 2005
              • 0 Attachment
                That doesn't really work either. Firefox ignores it and puts the text
                in the upper left. In IE it looks kind of OK until the height of the
                div is increased. Then the text is no longer centered. User font
                preference also affects the placement.

                This works in FF, IE and Opera but the % will need to be adjusted to
                fit the situation:

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
                <head>
                <title>test</title>
                <style type="text/css">
                div
                {
                border: thin solid red;
                }
                p
                {
                padding-top: 5%;
                padding-bottom: 5%;
                }
                </style>

                </head>
                <body>
                <div>
                <p>
                test
                </p>
                </div>
                </body>
                </html>

                --- Grant Mackenzie <grant@...> wrote:

                > For block in bock
                > eg: p in div
                >
                >
                > margin-top: auto;
                > margin-bottom: auto;
                >
                >
                > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                > <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
                > <head>
                > <title>test</title>
                > <style type="text/css">
                > div
                > {
                > border: thin solid red;
                > height:20;px
                > }
                > p
                > {
                > margin-top: auto;
                > margin-bottom: auto;
                > }
                > </style>
                >
                > </head>
                > <body>
                > <div>
                > <p>
                > test
                > </p>
                > </div>
                > </body>
                > </html>
                >
                >
                >
                > -----Original Message-----
                > From: sisterscape [mailto:sisterscape@...]
                > Sent: Sunday, 13 February 2005 06:12 p.m.
                > To: ntb-html@yahoogroups.com
                > Subject: Re: [NH] vertical alignment of text
                >
                >
                > text-align: center ; in a <div> or <p> will center text horizontally
                > but not vertically.
                >
                > --- marker@... wrote:
                >
                > > Hi,
                > > I have good luck with
                > >
                > > text-align: center;
                > >
                > > but I use it in the <div>, it may work in the <p>
                > >
                > > Karen
                > >
                > > On Sat, 12 Feb 2005 19:49:58 -0800 (PST), sisterscape brightened my
                > > day with:
                > > > First off you misspelled vertical in 'verticle-align'. ;) (I
                > don't
                > > >
                > > > understand why you have it attached to the <p> element either.)
                > In
                > > > any
                > > > case, it won't work. Here's an explanation from CSS guru Paul
                > > > O'Brien
                > > > over at SitePoint:
                > > >
                > > > "Vertical-align does not vertically align divs (it was never
                > meant
                > > > to).
                > > > Vertical-align determines the alignment of text within a single
                > > > line of
                > > > text or within a table cell. In a table cell the middle of the
                > > > element
                > > > will align with the middle of the cell."
                > > >
                > > > I would suggest fussing with the top and bottom margins of the
                > <p>
                > > > to
                > > > 50% (or whatever percentage will achieve the desired placement).
                > > >
                > > > sisterscape
                > > >
                > > >
                > > > --- "Don - htmlfixit.com" <don@...> wrote:
                > > >
                > > >> I am trying to get text to vertically align in a div so that it
                > is
                > > >> centered top to bottom.
                > > >> In firefox the following behaves as I would expect:
                > > >> <div id="subheaderright">
                > > >> <p style='verticle-align: middle;'>
                > > >> this is in the middle vertically
                > > >> </p>
                > > >>
                > > >> and the words go right smack in the middle, but in ie, the text
                > > >> stays
                > > >> in
                > > >> the upper left corner of the div, apparently unresponsive to
                > this
                > > >> directive. Any help appreciated.
                > > >>
                > > >> Don
                >
                >
                >
                >
                > __________________________________
                > Do you Yahoo!?
                > Yahoo! Mail - Easier than ever with enhanced search. Learn more.
                > http://info.mail.yahoo.com/mail_250
                >
                >
                > CSE HTML Validator Lite - it's free:
                > http://home.earthlink.net/~5wink/dl/cselite652.exe
                >
                > Fookes Software Home: http://www.fookes.us/redir
                >
                >
                >
                > Yahoo! Groups Sponsor
                > ADVERTISEMENT
                >
                >
                >
                >
                >
                >
                > Yahoo! Groups Links
                >
                > To visit your group on the web, go to:
                > http://groups.yahoo.com/group/ntb-html/
                >
                > To unsubscribe from this group, send an email to:
                > ntb-html-unsubscribe@yahoogroups.com
                >
                > Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.
                >
                >


                __________________________________________________
                Do You Yahoo!?
                Tired of spam? Yahoo! Mail has the best spam protection around
                http://mail.yahoo.com
              Your message has been successfully submitted and would be delivered to recipients shortly.