using CSS to center text

S

Steve Richter

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
 
D

David Wier

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

Steve Richter

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

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
 
A

Alan Silver

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

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>

Is centering without using width doable? CSS is very confusing!
Click to expand...

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
 
A

Alan Silver

Alan Silver said:
Correct, this is intended behaviour.
Click to expand...
<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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

CSS problem in Firefox 4
Rollover in 2nd column 1
centering div within a div 4
Style Sheet not getting applied to content page 8
<div style="display:inline;"> not behaving as expected 2
FF placed image at the top of the <p> rather in its vertical middle 3
CSS Problems 8
CSS menu 1

Top