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

5046RE: [NH] vertical alignment of text

Expand Messages
  • Grant Mackenzie
    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.
    • Show all 7 messages in this topic