using CSS to center text

Discussion in 'ASP .Net' started by Steve Richter, Jul 16, 2007.

  1. I can use margin: auto to center the text of a <p>. But only if I
    specify the width of the <p>

    <div style="border: #603 dotted; padding: 0.5em; margin: 1em 2em;">
    <p style="margin:1em auto; width: 8em; text-align: left;">
    Trying to center some text!. Width method.</p>
    </div>

    I cant get the <p> to center when I use width:auto, as in the width of
    the <p> element is the width of its text:

    <div style="border: #603 dotted; padding: 0.5em; margin: 1em 2em;">
    <p style="margin: 1em auto; display:inline; text-align: left;">
    Trying to center some text! display:inline;</p>
    </div>

    <div style="border: #603 dotted; padding: 0.5em; margin: 1em 2em;">
    <p style="margin: 1em auto; display:block; text-align: left;">
    Trying to center some text! display:block;</p>
    </div>

    Is centering without using width doable? CSS is very confusing!

    thanks,

    -Steve
    Steve Richter, Jul 16, 2007
    #1
    1. Advertising

  2. Steve Richter

    David Wier Guest

    In your Paragraph tags, you are showing:
    text-align: left
    which will not center, but left justify

    --
    David Wier
    MVP/ASPInsider
    http://aspnet101.com
    http://iWritePro.com



    "Steve Richter" <> wrote in message
    news:...
    >I can use margin: auto to center the text of a <p>. But only if I
    > specify the width of the <p>
    >
    > <div style="border: #603 dotted; padding: 0.5em; margin: 1em 2em;">
    > <p style="margin:1em auto; width: 8em; text-align: left;">
    > Trying to center some text!. Width method.</p>
    > </div>
    >
    > I cant get the <p> to center when I use width:auto, as in the width of
    > the <p> element is the width of its text:
    >
    > <div style="border: #603 dotted; padding: 0.5em; margin: 1em 2em;">
    > <p style="margin: 1em auto; display:inline; text-align: left;">
    > Trying to center some text! display:inline;</p>
    > </div>
    >
    > <div style="border: #603 dotted; padding: 0.5em; margin: 1em 2em;">
    > <p style="margin: 1em auto; display:block; text-align: left;">
    > Trying to center some text! display:block;</p>
    > </div>
    >
    > Is centering without using width doable? CSS is very confusing!
    >
    > thanks,
    >
    > -Steve
    >
    David Wier, Jul 16, 2007
    #2
    1. Advertising

  3. On Jul 16, 12:33 pm, "David Wier" <>
    wrote:
    > In your Paragraph tags, you are showing:
    > text-align: left
    > which will not center, but left justify
    >


    still not working.

    this works, but I dont know what it all means:

    <div style="text-align: center;">
    <div style="border: #603 dotted; padding: 0.5em; margin: 1em 2em;">
    <p style=" background-color:LightGreen; margin: 1em auto;
    display:inline;">
    Trying to center some text! display:inline;</p>
    </div>
    </div>

    this does not work and it makes no sense to me why it doesn't:

    <div style=" background-color:LightYellow; border: #603 dotted;
    padding: 0.5em; margin: 1em 2em;">
    <p style=" background-color:LightGreen; margin: 1em auto;
    display:inline;">
    Trying to center some text! display:inline;</p>
    </div>


    here is my <!doctype>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
    www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    thanks,

    -Steve



    > --
    > David Wier
    > MVP/ASPInsiderhttp://aspnet101.comhttp://iWritePro.com
    >
    > "Steve Richter" <> wrote in message
    >
    > news:...
    >
    >
    >
    > >I can use margin: auto to center the text of a <p>. But only if I
    > > specify the width of the <p>

    >
    > > <div style="border: #603 dotted; padding: 0.5em; margin: 1em 2em;">
    > > <p style="margin:1em auto; width: 8em; text-align: left;">
    > > Trying to center some text!. Width method.</p>
    > > </div>

    >
    > > I cant get the <p> to center when I use width:auto, as in the width of
    > > the <p> element is the width of its text:

    >
    > > <div style="border: #603 dotted; padding: 0.5em; margin: 1em 2em;">
    > > <p style="margin: 1em auto; display:inline; text-align: left;">
    > > Trying to center some text! display:inline;</p>
    > > </div>

    >
    > > <div style="border: #603 dotted; padding: 0.5em; margin: 1em 2em;">
    > > <p style="margin: 1em auto; display:block; text-align: left;">
    > > Trying to center some text! display:block;</p>
    > > </div>

    >
    > > Is centering without using width doable? CSS is very confusing!

    >
    > > thanks,

    >
    > > -Steve- Hide quoted text -

    >
    > - Show quoted text -
    Steve Richter, Jul 16, 2007
    #3
  4. Steve Richter

    Alan Silver Guest

    In article <>,
    Steve Richter <> writes
    >I can use margin: auto to center the text of a <p>. But only if I
    >specify the width of the <p>


    Correct, this is intended behaviour.

    margin:auto means that the rendering device will choose margins itself,
    based on the width of the container and the width of the contents (the
    text in this case).

    If you don't specify a width for the <p> then it's width will be only as
    wide as needed to fit the text. The <p> itself will not be centred, as
    you never told it to be. Therefore, the effect will be that the text
    will look left-aligned.

    To see this, try putting this into a page and viewing it (air code)...

    <p style="margin:auto; border: 1px solid black">This is some text</p>

    You will see from the border that the <p> is sitting up against the left
    edge of the container (probably the <body> unless you put it inside
    something else), and is as wide as the text requires.

    Now change it to...

    <p style="margin:auto; border: 1px solid black; width:10em">This is some
    text</p>

    where the width is big enough to exceed the space required to fit the
    text. You should see that the <p> itself stays on the left, but the text
    is centred within the <p>

    <snip>
    >Is centering without using width doable? CSS is very confusing!


    Depends on exactly what is going on on the page. The easiest way to do
    this, assuming it is appropriate for your situation, is to make the
    width of the <p> to be 100%. That will centre the text within the
    maximum space allowed, which will probably be what you want.

    Without seeing actual (X)HTML, it's hard to say more, but that should
    get you going.

    For advice on CSS, you would be better asking in
    news://comp.infosystems.www.authoring.stylesheets where there are some
    serious CSS experts. Make sure you post clear (and valid) (X)HTML and
    CSS, and make it clear what you are trying to do. You might get a rough
    ride (there's some unforgiving characters there!), but you should get
    some expert help.

    HTH

    --
    Alan Silver
    (anything added below this line is nothing to do with me)
    Alan Silver, Jul 17, 2007
    #4
  5. Steve Richter

    Alan Silver Guest

    In article <QsS$>, Alan Silver
    <> writes
    >In article <>,
    >Steve Richter <> writes
    >>I can use margin: auto to center the text of a <p>. But only if I
    >>specify the width of the <p>

    >
    >Correct, this is intended behaviour.

    <snip>

    I realised after posting that what I wrote was largely rubbish! I was
    half asleep, and wasn't thinking clearly. Please ignore it all except
    for the first line (quoted above) and the comments about seeking expert
    advice in a CSS newsgroup.

    Briefly, what I meant to say was that most standards-compliant browsers
    will render a <p> to take up the full width of the available container.
    Therefore, if you start a new (X)HTML document, and enter the following
    as the only thing in the body...

    <p style="margin:auto; border: 1px solid black">This is some text</p>

    ....you will see that the border of the <p> goes the full width of the
    browser window.

    If you now change it to...

    <p style="margin:auto; border: 1px solid black; text-align:
    center;">This is some text</p>

    ....you will see that the text is centred within its container. Since the
    container (ie, the <p>) is the full width of the page, this effectively
    centres the text on the page.

    You don't need to wrap the <p> in a <div> to do this. As others have
    pointed out, if you have text-align:left on the <p>, then it ill
    left-align the text.

    If you are still having problems, please post back the (X)HTML (without
    styling) so we can see what you are trying to centre. Better still, go
    to the CSS newsgroup I mentioned.

    HTH

    --
    Alan Silver
    (anything added below this line is nothing to do with me)
    Alan Silver, Jul 17, 2007
    #5
    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. brucie

    Re: [css] center

    brucie, Jun 22, 2003, in forum: HTML
    Replies:
    0
    Views:
    1,401
    brucie
    Jun 22, 2003
  2. shank

    CSS and center align

    shank, Sep 29, 2003, in forum: HTML
    Replies:
    7
    Views:
    27,923
    b_imam77
    Dec 30, 2008
  3. Ken Adams
    Replies:
    3
    Views:
    65,615
    David Dorward
    Apr 25, 2005
  4. richard

    how to center text in css ?

    richard, Sep 22, 2006, in forum: HTML
    Replies:
    5
    Views:
    454
    Jonathan N. Little
    Sep 22, 2006
  5. Max2006
    Replies:
    3
    Views:
    549
    Walter Wang [MSFT]
    Aug 27, 2007
Loading...

Share This Page