/    Sign up×
Community /Pin to ProfileBookmark

Center text within division

Hi,

I need to make a template for numerous poems. The length of the lines will vary from file to file.

How can I center the text of the poem so that text will be left-aligned but the left and right margin will be equal.

Andy

[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”eng”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

<title>PrintTestReflections </title>
<style type=”text/css”>
<!–
div#container{
width:6.5in; margin:auto;
}

div#printhead {
font: 16pt Verdana, sans-serif;
color: #999;
background:#fff;
text-align:center;
}

#centercol {
padding:0em;
line-height: 1.5em;
width:6.5in;
margin-left: auto;
margin-right: auto;
}
#centercol h1{
font: 800 16pt “Times New Roman”, serif;
text-align:center;
}
#centercol p{
font: 600 14pt “Times New Roman”, serif;
text-align:left;
}

–>
</style>
</head>
<body>
<div id=”container”>

<div id=”printhead”>Central Association of Northwestern PA
</div><!–end div printhead–>

<div id=”centercol”>
<a name=”article”></a>
<h1>Reflections(1)</h1>

<p>
I never understood your feelings about me.<br />
I know you were never satisfied with me.<br />
Didn’t seem that I could ever do anything to please you.<br />
</p><p>
I don’t think you ever knew how much I hurt.<br />
How much I wanted your approval,<br />
your love.<br />
</p><p>
You were never able to give me what I felt I needed inside.<br />
I never felt worthy around you.<br />
So little self worth.<br />
</p><p>
I would medicate myself so I wouldn’t feel how I always seemed to feel.<br />
To cover my feelings of inadequacy, worthlessness and anger.<br />
It seemed so much easier that way.<br />
</p><p>
When I was with you when you passed on, I was so angry at you.<br />
The only feeling I could identify at that time was anger, Dad .<br />
Why couldn’t you love me?<br />
</p><p>
I am moving on and working through my feelings about my life with you.<br />
Today I can say…I forgive you dad.<br />
I’ve had to so I can move on towards where I want to be.<br />
</p><p>

Today I feel good.
</p>

<p><cite>Written by, Anonymous</cite></p>

</div><!– end div centercol –>
<div id=”footer”>
<hr><p class=”copy”>&copy;2007 Central Association of Western Pennsylvania</p>
</div><!–end div footer”–>
</div><!– end div container –>
</body>
</html>
[/code]

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@ToonMarinerFeb 16.2007 — use this in your css...

#centercol

{

text-align: justify;

}
Copy linkTweet thisAlerts:
@1andywauthorFeb 16.2007 — Added the 'justify' rule, but it didn't effect the layout. The text continues to hug the left edge of the div.

Andy
Copy linkTweet thisAlerts:
@WebJoelFeb 17.2007 — How can I center the text of the poem so that text will be left-aligned but the left and right margin will be equal.[/QUOTE] I played around with this last night for a little while but I do not understand what you are asking for... it seems conradictory to be 'left-aligned' [I]and[/I] have equal left-and-right margins...? Unless you mean left-aligned TEXT, but if divided by an imaginary vertical line, the text is 'split into two approx. equal halves, left & right'. In that case, on the 'wrapper' that contains the entire DIV, add [B]style="margin-left:25px;"[/B] and this will shove the entire 'wrapper' 25-pixels towards the right... thus 'balancing' the weight of the text unpon said imaginary center divider... Yes? No?

-Can you please elaborate further?
Copy linkTweet thisAlerts:
@1andywauthorFeb 17.2007 — Hi,

Yes, I would like the longest line of text to be centered within the document, but with the left margin being aligned. However, this is only needed for the print media. I am good to go on the screen. On the print, however, I drop the header, footer and menu.

This should be reasonable with javascript finding the available width. But how do I apply this to CSS?

Thanks,

Andy
Copy linkTweet thisAlerts:
@WebJoelFeb 17.2007 — .... But how do I apply this to CSS?[/QUOTE] With a second link to a external CSS after the [I]first[/I] stylesheet, but with [B]media="print"[/B] (which excludes "screen" and "all" values of the first CSS), and on [I]that[/I], have a different set of CSS rules guided more towards affecting the printed page.

You could have just "[B]p {text-align:center;}[/B]" and adjusted font-heights (I assume that you'd want something more like 'regular type' and not that "font-weight:700;" which is rather "[B]bold[/B]" for [I]printed material[/I]), and/or whatever other Selector/Declarations it takes to affect the proper printed output (page height, page widths, page breaks, etc.).
Copy linkTweet thisAlerts:
@1andywauthorFeb 17.2007 — Yes, I see. I will work on the print style.

Thanks,

Andy
Copy linkTweet thisAlerts:
@1andywauthorFeb 20.2007 — WebJoel,

http://www.mhanp.org/reflections_1.php.

The print style sheet worked out successfully.

Thanks, teacher.

Andy
×

Success!

Help @1andyw spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...