align: center

Discussion in 'HTML' started by Malcolm Collett, Oct 17, 2003.

  1. What is the correct CSS for align: center?

    I am wanting to do apply the following to a paragraph:
    {width: 400px; text-align: justify; align: center}

    But my CSS reference doesn't have anything for the align: center. So I have
    to apply <center> (or <div align="center">) to each paragraph.

    Thanks
    Malcolm
     
    Malcolm Collett, Oct 17, 2003
    #1
    1. Advertising

  2. Malcolm Collett

    David Graham Guest

    "Malcolm Collett" <> wrote in message
    news:...
    > What is the correct CSS for align: center?
    >
    > I am wanting to do apply the following to a paragraph:
    > {width: 400px; text-align: justify; align: center}
    >
    > But my CSS reference doesn't have anything for the align: center. So I

    have
    > to apply <center> (or <div align="center">) to each paragraph.
    >
    > Thanks
    > Malcolm
    >

    To align a block level element in css use
    margin: 0 auto;

    Make sure IE6 is in standard mode by using the correct DTD. IE5 and IE5.5
    incorrectly align a block level element with
    text-align: center;
    HTH
    David
     
    David Graham, Oct 17, 2003
    #2
    1. Advertising

  3. Malcolm Collett

    Sid Ismail Guest

    On Fri, 17 Oct 2003 09:24:33 +0200, "Malcolm Collett" <>
    wrote:

    : I am wanting to do apply the following to a paragraph:
    : {width: 400px; text-align: justify; align: center}

    Justify and center? Huh? You wear a belt and brassieres?

    Sid
     
    Sid Ismail, Oct 17, 2003
    #3
  4. > > What is the correct CSS for align: center?
    > >
    > > I am wanting to do apply the following to a paragraph:
    > > {width: 400px; text-align: justify; align: center}
    > >
    > > But my CSS reference doesn't have anything for the align: center. So I

    > have
    > > to apply <center> (or <div align="center">) to each paragraph.
    > >
    > > Thanks
    > > Malcolm
    > >

    > To align a block level element in css use
    > margin: 0 auto;


    I have tried this and several variations of it. Setting left/right margins
    to auto produces a left aligned paragraph, not a centered one. Using
    something like margin-left: 15% produces a paragraph that drifts all over
    the place as the window is resized.

    > Make sure IE6 is in standard mode by using the correct DTD.


    I don't understand this one. Where do I check that ie6 is in standard mode?
    What is DTD?

    Thanks
    Malcolm
     
    Malcolm Collett, Oct 17, 2003
    #4
  5. > : I am wanting to do apply the following to a paragraph:
    > : {width: 400px; text-align: justify; align: center}
    >
    > Justify and center? Huh? You wear a belt and brassieres?
    >
    > Sid


    The justify is to justify the text within the paragraph. (works great)

    The align: center is to center the paragraph on the page (I don't know how
    to do this one - align: center doesn't exist in CSS)
     
    Malcolm Collett, Oct 17, 2003
    #5
  6. William Tasso, Oct 17, 2003
    #6
  7. Malcolm Collett

    David Graham Guest

    "Malcolm Collett" <> wrote in message
    news:...
    > > : I am wanting to do apply the following to a paragraph:
    > > : {width: 400px; text-align: justify; align: center}
    > >
    > > Justify and center? Huh? You wear a belt and brassieres?
    > >
    > > Sid

    >
    > The justify is to justify the text within the paragraph. (works great)
    >
    > The align: center is to center the paragraph on the page (I don't know how
    > to do this one - align: center doesn't exist in CSS)
    >

    OK
    Put the following 2 lines at the very top of your html like this

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    etc etc.......

    You will find that IE6 now behaves itself and obeys the margin: 0 auto;
    Note to regulars, I haven't given the OP the dtd for strict, because if he
    is anything like me when I first started, then he will have loads of
    presentational stuff in his html that the validator would bulk on if it had
    a strict dtd.
    HTH
    David
     
    David Graham, Oct 17, 2003
    #7
  8. Malcolm Collett

    DU Guest

    Malcolm Collett wrote:

    >>: I am wanting to do apply the following to a paragraph:
    >>: {width: 400px; text-align: justify; align: center}
    >>
    >>Justify and center? Huh? You wear a belt and brassieres?
    >>
    >>Sid

    >
    >
    > The justify is to justify the text within the paragraph. (works great)
    >
    > The align: center is to center the paragraph on the page (I don't know how
    > to do this one - align: center doesn't exist in CSS)
    >
    >
    >
    >
    >
    >


    Like others replied to you, justify and align center is not
    recommendable. There is a large documentation available on this. This is
    for readability and legibility.
    "justified text blocks often suffer from poor spacing and excessive
    hyphenation and require manual refinement.(...) the legibility of your
    Web documents will suffer if you set your text in justified format.
    (...) Centered and right-justified text blocks are difficult to read. We
    read from left to right, anchoring our tracking across the page at the
    vertical line of the left margin."
    Web site design/Typography/legibility/alignment/justified text and
    Centered and right-justified text blocks
    http://www.webstyleguide.com/type/align.html


    W3C CSS level 1
    4 Formatting model
    4.1.2 Horizontal formatting
    "(...) if both 'margin-left' and 'margin-right' are 'auto', they will be
    set to equal values. This will center the element inside its parent."
    http://www.w3.org/TR/REC-CSS1#horizontal-formatting

    W3C CSS level 2
    10 Visual formatting model details
    10.3.3 Block-level, non-replaced elements in normal flow
    "If both 'margin-left' and 'margin-right' are 'auto', their computed
    values are equal."
    http://www.w3.org/TR/REC-CSS2/visudet.html#q6

    Finally, like others told you, you need a doctype declaration which will
    trigger compliance mode in MSIE 6. Coding to trigger compliance mode is
    coding for maximum browser compatibility possible to get.

    http://www.hut.fi/u/hsivonen/doctype.html

    http://www.opera.com/docs/specs/doctype/

    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
    http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
     
    DU, Oct 17, 2003
    #8
  9. > Make sure IE6 is in standard mode by using the correct DTD. IE5 and IE5.5
    > incorrectly align a block level element with
    > text-align: center;
    > HTH
    > David


    I found that IE6 will correctly center the paragraph with margin: 0 auto;
    IE5.5 leaves the paragraph left aligned.

    I have decided that for now I will just use <center>. (Works great!). I will
    look into DTDs etc in a few days when I have some time.

    Thanks all for the help.
    Malcolm
     
    Malcolm Collett, Oct 17, 2003
    #9
  10. Malcolm Collett

    TheKeith Guest

    "David Graham" <> wrote in message
    news:lnNjb.41$...
    >
    > "Malcolm Collett" <> wrote in message
    > news:...
    > > What is the correct CSS for align: center?
    > >
    > > I am wanting to do apply the following to a paragraph:
    > > {width: 400px; text-align: justify; align: center}
    > >
    > > But my CSS reference doesn't have anything for the align: center. So I

    > have
    > > to apply <center> (or <div align="center">) to each paragraph.
    > >
    > > Thanks
    > > Malcolm
    > >

    > To align a block level element in css use
    > margin: 0 auto;


    I actually had the same question--I didn't realize that <div align=center>
    was not valid html 4.01 strict, but according to the validator, it is. Could
    you explain what "margin:0 auto" does--why it works? Thanks.
     
    TheKeith, Oct 18, 2003
    #10
  11. TheKeith wrote:

    > I actually had the same question--I didn't realize that <div align=center>
    > was not valid html 4.01 strict, but according to the validator, it is. Could
    > you explain what "margin:0 auto" does--why it works? Thanks.


    "margin: 0 auto;" is shorhand for:

    margin-top: 0;
    margin-left: auto;
    margin-bottom: 0;
    margin-right: auto;

    If an element has an explicit width set, in your case 400px, and then has
    the left and right margins set to "auto", these two margins will both be
    equal, effectively centring the element.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
     
    Toby A Inkster, Oct 18, 2003
    #11
  12. Malcolm Collett

    TheKeith Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > TheKeith wrote:
    >
    > > I actually had the same question--I didn't realize that <div

    align=center>
    > > was not valid html 4.01 strict, but according to the validator, it is.

    Could
    > > you explain what "margin:0 auto" does--why it works? Thanks.

    >
    > "margin: 0 auto;" is shorhand for:
    >
    > margin-top: 0;
    > margin-left: auto;
    > margin-bottom: 0;
    > margin-right: auto;
    >
    > If an element has an explicit width set, in your case 400px, and then has
    > the left and right margins set to "auto", these two margins will both be
    > equal, effectively centring the element.


    Thanks. Just for the hell of it, I tried setting it to just "auto" instead
    of the "0 auto" and it had the same effect. I was thinking if I set
    everything to auto, then the content would be aligned to the center
    horizontally and the middle vertically, but that didn't happen--it just did
    the horizontal center. Then I tried setting the html and body elements to
    100% heights (with styles), but that didn't do it either--the "margin: 0
    auto" just works horizontally. Is there something else I could do to get it
    to be in the center and middle? Just curious--thanks.
     
    TheKeith, Oct 18, 2003
    #12
  13. Malcolm Collett

    Eric Bohlman Guest

    "TheKeith" <> wrote in
    news::

    > Thanks. Just for the hell of it, I tried setting it to just "auto"
    > instead of the "0 auto" and it had the same effect. I was thinking if
    > I set everything to auto, then the content would be aligned to the
    > center horizontally and the middle vertically, but that didn't
    > happen--it just did the horizontal center. Then I tried setting the
    > html and body elements to 100% heights (with styles), but that didn't
    > do it either--the "margin: 0 auto" just works horizontally. Is there
    > something else I could do to get it to be in the center and middle?


    The problem is that the width of your document is fixed (in the absence of
    an explicit specification, it's the width of the viewable portion of your
    browser window), but the height is determined by the height of the
    contents, and unless you explicitly specify a height, it's calculated to be
    "as big as it needs to be, no more, no less." So vertically centering your
    content within a box that's exactly as tall as your content means doing
    nothing at all. It doesn't mean centering it in the available viewing
    area, because the box isn't as big as the viewing area.
     
    Eric Bohlman, Oct 18, 2003
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,228
  2. VB Programmer

    Question: TextBox - Can't Align Center

    VB Programmer, Aug 27, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    16,538
    Grant
    Aug 27, 2003
  3. tshad

    text-align vs align

    tshad, Jun 23, 2005, in forum: HTML
    Replies:
    1
    Views:
    1,325
    David Dorward
    Jun 23, 2005
  4. Paul Lautman

    left align within centre align

    Paul Lautman, Mar 3, 2006, in forum: HTML
    Replies:
    3
    Views:
    597
    Paul Lautman
    Mar 3, 2006
  5. Steve Richter
    Replies:
    1
    Views:
    938
    Mark Rae
    Jun 24, 2007
Loading...

Share This Page