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

Re: [NH] How do I centre?

Expand Messages
  • dhays@haysdesign.com
    I sometimes use a percentage, such as: .centereddata { margin: 0 10% 0 10%; } Some stuff (Change the 10% to anything you want.)
    Message 1 of 7 , Oct 2, 2007
    • 0 Attachment
      I sometimes use a percentage, such as:

      .centereddata {
      margin: 0 10% 0 10%;
      }

      <div class="centereddata">Some stuff</div>

      (Change the 10% to anything you want.)

      And, if you want everything inside the DIV centered...

      .centereddata {
      margin: 0 10% 0 10%;
      text-align: center;
      }

      Now you have a fluid, centered DIV. As the browser expands or contracts,
      the DIV does, as well.

      Is this what you mean?

      Best,

      Dennis
      ----------------------
      Photo News Today
      http://www.photonewstoday.com



      On Tue, 02 Oct 2007 16:48:34 +0200, Axel Berger <Axel-Berger@...>
      wrote:
      > Don, Loro, thanks for your input
      >
      > "Don - HtmlFixIt.com" wrote:
      >> use auto for the left and right margin
      >> and that will center something horizontally.
      >
      > Yes, if there are margins. But not if the entity, say a DIV, spreads out
      > to fill all the horizontal space as everything in HTML does by default.
      >
      > loro wrote:
      >> So what is the content and what decides its "natural" width?
      >> Paragraphs suggest the content is text, but what's the width of
      >> some text? The width of the longest line or of the longest word?
      >
      > Exactly. Of course this only makes sense for short headers and lines
      > broken with <BR>.
      >
      >> I'd either use a width, it needn't be fixed
    • sisterscape
      I m not sure that I understand either but text-align:center; is a standard way to center content as well as block elements. ...
      Message 2 of 7 , Oct 2, 2007
      • 0 Attachment
        I'm not sure that I understand either but text-align:center; is a
        standard way to center content as well as block elements.

        > Axel Berger wrote:
        > > It is trivial to centre words and images inside of paragraphs. It
        > is
        > > also possible to centre a DIV with left aligned content inside if I
        > give
        > > that DIV a definite width. What I can't do is make it work out its
        > own
        > > width.
        > >



        ____________________________________________________________________________________
        Catch up on fall's hot new shows on Yahoo! TV. Watch previews, get listings, and more!
        http://tv.yahoo.com/collections/3658
      • Axel Berger
        ... Sure is. I ve now cobbled together an example, borders and backgrounds are just to make it more obvious what happens. The table does what I want: It makes
        Message 3 of 7 , Oct 2, 2007
        • 0 Attachment
          sisterscape wrote:
          > I'm not sure that I understand either but text-align:center; is a
          > standard way to center content as well as block elements.

          Sure is. I've now cobbled together an example, borders and backgrounds
          are just to make it more obvious what happens. The table does what I
          want: It makes itself exactly as wide as it needs to be and then centres
          itself, and I can even do the centering by CSS alone, so it will be left
          aligned in unstyled context and not stand out unnecessarily, i.e. look
          no different from the DIV above.
          The DIV also centres itself, but you only see that because of the
          colouring. The text is definitely to the left in a wide window and it
          gets broken far too soon in a small one. The table does the latter only
          when it actually touches the border. Normally a slight bit of margining
          is part of my <H4> and my <P> so it won't look that ugly. And of course
          in this example the line are excessively short, think central in a three
          column layout and think long street names and you get a better picture.

          Alright, so the table works fine, but it is using a table only for
          layout on non-tabular material.

          Axel

          <DIV CLASS="outer" STYLE="
          width:80%;
          margin-left:auto;
          margin-right: auto;
          border: 3px solid #0000FF;
          text-align:center">

          <DIV CLASS="inner" STYLE="
          width:40%;
          margin-left:auto;
          margin-right: auto;
          background-color: #EEEEEE;">
          <h4 style="text-align:left">Great people</h4>
          <P style="text-align: left">
          Don <BR>
          html-fixit
          </P>
          <P style="text-align: left">
          loro <BR>
          another nice helper
          </P>
          <P style="text-align: left">
          sisterscape <BR>
          third of the bunch
          </P>
          </DIV><!-- end .INNER -->

          <TABLE ALIGN="left" BGCOLOR="#CCFFCC" BORDER="0" CELLSPACING="0"
          CELLPADDING="0" STYLE=" margin-left:auto; margin-right: auto;">
          <TR ALIGN="left">
          <TD ALIGN="left">
          <h4 style="text-align:left">Great people</h4>
          <P style="text-align: left">
          Don <BR>
          html-fixit
          </P>
          <P style="text-align: left">
          loro <BR>
          another nice helper
          </P>
          <P style="text-align: left">
          sisterscape <BR>
          third of the bunch
          </P>
          </TD></TR>
          </TABLE>
          <BR CLEAR="ALL">
          </DIV><!-- end .OUTER -->
        Your message has been successfully submitted and would be delivered to recipients shortly.