/    Sign up×
Community /Pin to ProfileBookmark

Center a document?

Copy linkTweet thisAlerts:
Jan 09.2010

Hey so i am new here, I’m only 14 but i would like to get a head start in web development, I’ve already started learning PHP ?

So i have been trying to center some in the middle of the page, I have the horizontal alignment perfect, But i am trying to get the vertical alignment right, At the moment its just at the top of the page in the middle, But i want it in the middle vertically too, Heres my CSS code:

[CODE]
P.blocktext {
text-align: center;

}
[/CODE]

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@WestWebJan 09.2010 — There's a bit more to what you're asking as there are at least a few methods of getting "some in the middle".

One way to do what I think you're thinking:

p.blocktext {

width: 400px;

text-align: left;

position: absolute;

top: 100px;

left: 100px;

}

Your code will make all of the text in the paragraph centered and stretch right across the page, this is why you give it a width, to contain the text. You have now aligned your paragraph text to the left margin instead of having shorter lines centered on the page. Your paragraph will be positioned 100px from the top and left of its parent element. You should change these numbers until your paragraph is centered where you like.

A great place to learn
Copy linkTweet thisAlerts:
@FangJan 09.2010 — http://www.w3.org/Style/Examples/007/center

The above method will not wok in pre IE8 browsers, see: http://milov.nl/code/css/verticalcenter.html
×

Success!

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

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

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