text horizontal alignment

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Jeff Higgins - 23 Feb 2006 13:57 GMT

Hi,
I would like to left align the text
within a paragraph element while keeping
the paragraph center aligned within the body.
The following doesn't do it.

Any help will be greatly appreciated.
Jeff Higgins

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>A Quick Brown Fox</title>
<style type="text/css" media="all">
body { text-align: center;
background: white none; }
#quotation p span.s1{ text-align: left;
font: italic 14pt georgia, serif;
line-height: 1;
color: gray; }
#quotation p span.s2{ text-align: left;
font: italic 10pt georgia, serif;
line-height: 1.75;
color: black; }
</style>
</head>
<body>
<h1>A Quick Brown Fox</h1>
<div id="quotation">
<p>
<span class="s1">"The quick brown fox jumps over a lazy dog.<br/>
Pack my box with five dozen liquor jugs.<br/>
Amazingly few discotheques provide jukeboxes."</span><br/>
<span class="s2">from "Fun With Words - Pangrams",
RinkWorks(dotcom)</span>
</p>
</div>
<h1>A Fast Fawn Fox</h1>
</body>
</html>

Reply to this Message

Stan Brown - 23 Feb 2006 15:14 GMT

Thu, 23 Feb 2006 07:57:04 -0600 from Jeff Higgins
<oohiggins@yahoo.com>:

> I would like to left align the text
> within a paragraph element while keeping
> the paragraph center aligned within the body.
> The following doesn't do it.

Please don't post code; give a URL so that we can try things
ourselves.

In general, you want to style the paragraph with equal and nonzero
values of margin-left and margin-right. Why? A paragraph will expand
to the maximum width available to it; therefore you center it
(visually) by restricting the available width.

Nicholas Theodorakis has a good page on centering:
http://theodorakis.net/blockcenter.html

You may or may not need text-align:left(*) as well. (It's the
default, so you need it only if some enclosing element has a
different alignment that the paragraph inherits.)

Signature

Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

Reply to this Message

Jeff Higgins - 24 Feb 2006 00:31 GMT

> Thu, 23 Feb 2006 07:57:04 -0600 from Jeff Higgins
> <oohiggins@yahoo.com>:
[quoted text clipped - 13 lines]
>
> Why We Won't Help You:[snip]

Thank you Stan, for the pointer and tips. Much appreciated.
Maybe even more appreciated was your fair handling of
this newcomer's posting transgressions. Notice taken.
This is my very first stab at CSS.
Just bought ISBN 0-596-00525-3.
Haven't absorbed all (much?) of it yet.
Jeff Higgins

Reply to this Message

Gérard Talbot - 24 Feb 2006 23:47 GMT

Jeff Higgins wrote :

> Hi,
> I would like to left align the text
> within a paragraph element while keeping
> the paragraph center aligned within the body.

Centring using CSS
http://dorward.me.uk/www/centre/

Interactive demo on CSS horizontal alignment and horizontal formating
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html

Gérard
--
remove blah to email me

Reply to this Message

Jeff Higgins - 26 Feb 2006 00:32 GMT

> Jeff Higgins wrote :
>> Hi,
[quoted text clipped - 7 lines]
> Interactive demo on CSS horizontal alignment and horizontal formating
> http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html

Thank you for the pointers Gérard.
Jeff Higgins

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / February 2006

text horizontal alignment