Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > using CSS to center text

Reply
Thread Tools

using CSS to center text

 
 
Steve Richter
Guest
Posts: n/a
 
      07-16-2007
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

 
Reply With Quote
 
 
 
 
David Wier
Guest
Posts: n/a
 
      07-16-2007
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" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.com...
>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
>



 
Reply With Quote
 
 
 
 
Steve Richter
Guest
Posts: n/a
 
      07-16-2007
On Jul 16, 12:33 pm, "David Wier" <(E-Mail Removed)>
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" <(E-Mail Removed)> wrote in message
>
> news:(E-Mail Removed) oups.com...
>
>
>
> >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 -



 
Reply With Quote
 
Alan Silver
Guest
Posts: n/a
 
      07-17-2007
In article <(E-Mail Removed) .com>,
Steve Richter <(E-Mail Removed)> 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)
 
Reply With Quote
 
Alan Silver
Guest
Posts: n/a
 
      07-17-2007
In article <QsS$(E-Mail Removed)>, Alan Silver
<(E-Mail Removed)> writes
>In article <(E-Mail Removed) .com>,
>Steve Richter <(E-Mail Removed)> 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)
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to show the UpdateProgress contents at the center of monitor by using only CSS Max2006 ASP .Net 3 08-27-2007 03:02 AM
how to center text in css ? richard HTML 5 09-22-2006 01:25 PM
Naming of core NASA center with the words "Mission Control Center" & mass use of religious anthem sounding word "Mission" in Context of Space Exploration & the Moon Landing Hoax moonlandinghoaxreligious@yahoo.com Digital Photography 0 09-27-2005 08:28 PM
How to center a span element using external css? Ken Adams HTML 3 04-25-2005 05:50 PM
Re: [css] center brucie HTML 0 06-22-2003 08:08 PM



Advertisments