/    Sign up×
Community /Pin to ProfileBookmark

how to control page alignment

Copy linkTweet thisAlerts:
Feb 15.2005

Hello

I am looking for the correct way to control the alignment of elements in my HTML page.
in the old days, I used to add the <center> tag whenever I wanted to center some content.
if I wanted to set the alignment of content inside a table cell, I would use <td align=”left”> or <td align=”center”>

I also noticed the CSS rule text-align.
My question is, what is the correct way to use CSS to align elements so that it adhere with strict DTD rules

regards

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@JupacFeb 15.2005 — you can use float:left; or right...
Copy linkTweet thisAlerts:
@ray326Feb 15.2005 — Look into the styles "text-align:center" and "margin:xxx auto" [URL=http://www.meyerweb.com/eric/css/references/css1ref.html]here[/URL].
Copy linkTweet thisAlerts:
@JupacFeb 15.2005 — [font=Trebuchet MS][i]Originally posted by ray326 [/i]

[B]Look into the styles "text-align:center" and "margin:xxx auto" [URL=http://www.meyerweb.com/eric/css/references/css1ref.html]here[/URL]. [/B][/QUOTE] Which will make your whole layout centerd in the screen

heres an example http://doubleimage.net/faux.html

[/font]
Copy linkTweet thisAlerts:
@jasongrauthorFeb 15.2005 — Thanks for the replies

I have tried to use the correct HTML/CSS code to center a simple page like so:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style="margin: 10px auto"&gt;
test
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

can you see what is going on wrong? The content gets displayed left aligned and not centered
Copy linkTweet thisAlerts:
@NogDogFeb 15.2005 — You need to specify a width for the div, else it will take up the available space. Here is the "suspenders and a belt" approach (center the div AND center the text within the div):
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style="width: 4em; text-align: center; margin: 10px auto"&gt;
test
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @jasongr 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 6.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: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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