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

How do I centre?

Expand Messages
  • Axel Berger
    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
    Message 1 of 7 , Oct 2, 2007
    • 0 Attachment
      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.

      In HTML every element sets its own width to fill the outer one and its
      own height to fit the content. What I need is to tell a DIV to fit its
      width to the content. I can't find a way to do that.

      Of course there is an alternative. I could just use a table with only
      one line and one column and centre that, but this doesn't seem very
      elegant. There is another reason for wanting CSS in this particular
      case: I do not want these paragraphs to be centred in the unstyled
      version for older browsers, and the table would do that.

      Any ideas?

      Axel
    • Don - HtmlFixIt.com
      ... I m not positive I follow, but use auto for the left and right margin and that will center something horizontally.
      Message 2 of 7 , Oct 2, 2007
      • 0 Attachment
        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.
        >
        I'm not positive I follow, but use auto for the left and right margin
        and that will center something horizontally.
      • loro
        ... 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
        Message 3 of 7 , Oct 2, 2007
        • 0 Attachment
          Axel Berger wrote:
          >Of course there is an alternative. I could just use a table with only
          >one line and one column and centre that, but this doesn't seem very
          >elegant. There is another reason for wanting CSS in this particular
          >case: I do not want these paragraphs to be centred in the unstyled
          >version for older browsers, and the table would do that.

          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?

          I'd either use a width, it needn't be fixed, or equal left and right
          margins, alternatively padding (either for the Ps themselves or a parent
          block). But then again, I'm not sure what it really is you want to do and
          with what. An example of that would make things easier. Could you create
          one with tables, just so we can see what you mean?

          Lotta
        • Axel Berger
          Don, Loro, thanks for your input ... Yes, if there are margins. But not if the entity, say a DIV, spreads out to fill all the horizontal space as everything in
          Message 4 of 7 , Oct 2, 2007
          • 0 Attachment
            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

            How can it be not fixed? For a table I specify some small width as
            tables spread out to fit their content as far as possible, but DIVs
            don't. {overflow: visible;} will write outside the DIV, not widen it
            (except in IE). It would of course be easy to choose a sensible em width
            to fit the present circumstance, but I want to define a class that can
            be used time and time again. The outer container changes its width
            through the fluid layout and the inner content can be anything - it can
            even be wider than the ouside forcing additional breaks. For me the
            viewer has to be the arbiter of screen layout and my design has to
            accomodate him, not the other way round as I see all to often.

            > Could you create
            > one with tables, just so we can see what you mean?

            A bit pressed right now, perhaps later today.

            Danke
            Axel
          • 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 5 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 6 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 7 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.