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

5047RE: [NH] vertical alignment of text

Expand Messages
  • sisterscape
    Feb 13 11:36 AM
    • 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
    • Show all 7 messages in this topic