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

Re: [NH] vertical alignment of text

Expand Messages
  • 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 1 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 2 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 3 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 4 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.