going crazy

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
How do i get a h1 sized  single sentence in the middle of the screen
please help .   I managed to make it a hyperlink not underlined but with
<center >  it goes in the middle of the line but not in the middle of the
screen  i am very new to this all   If it is not to much work  send me a
solution  ican cut and paste
 please help as i tried now for days and i dont see  a solution

Re: going crazy

Quoted text here. Click to load it

Don't use <center> its deprecated.
To get it in the middle of the screen horizontally is simple, just put this
in the stylesheet

h1 { width: 40%; margin: 0 auto;text-align: center;border: 2px solid red;}

The width is so you can see that the block level element is indeed
centered - without the width it just goes straight across the viewport. The
text-align is to get the text within the h1 to center itself. The borders is
just to make things easier as you can see an outline of where the h1 is. The
snag with the above is IE 6 (Quirk mode) , IE5.5, IE5 and earlier don't
recognise the margin: 0 auto bit. Instead, these browsers incorrectly center
block level elements (thats the actual element) with text-align: center
which is only supposed to affect inline elements like text, span, image
etc.. So you can get these browsers to play ball by wrapping a div around
the h1 and centering the h1 from this wrapper div like this

<h1>some text</h1>

and in the css stylesheet

div {text-align: center; border: 2px solid green;}
h1 { width: 40%; margin: 0 auto;text-align: center;border: 2px solid red;}

The h1 text-align: center is probably redundant now as it will be inherited
from the div.

I know this doesn't answer your question about vertical centering on the
screen but it is a start. Vertical centering is more tricky because there is
no height, a page is as tall as it needs to be. So if you put position:
relative; top: 50%; on the div this will give unpredictable results
(assuming the div is a direct child of the body element here) - I think bad
browsers like IE5, IE5.5 and IE6 (quirk mode) will probably do what you want
but good browsers (Mozilla 1.4, Opera 7.1) will not. This is because the
body has a default of height: auto which means it is as tall as it needs to
be to contain the contents, not as tall as the viewport. The bad browsers
don't seem to care about this but good browsers do.
I have seen methods were the position of the containing div is played with
so that its top left corner is in the center of the viewport, and the
negative margins are used to pull the div top left until its center is at
the center of the viewport - this is done by have negative left and top
margins equal to 50% of the divs width and height. This method is not very
good as you tend to loose some of the div in small windows.
 I don't know of a good reliable method to vertically center an element,
perhaps someone could help out here!

Re: going crazy

David Graham wrote:
Quoted text here. Click to load it

Quoted text here. Click to load it

I don't know if it is helpful to suggest it, but one method that I've seen
in a number of situations is to use a table with a single cell but, since
the method uses a table of height=100%, it doesn't validate and doubtless
breaks under a number of circumstances. The trick is to place all the page
contents inside the single cell with <td valign="middle" and align="center">

It's deprecated and won't validate but it's the only method, besides the
negative margin method above, that I've seen for centering vertically and

If you've got to have the contents centred, you'll need to choose which
flawed method you'd be prepared to accept - or, perhaps the best method, you
could accept that you can't have vertically centred contents.

If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

Re: going crazy

mukuta wrote:

Quoted text here. Click to load it

<hl style="text-align:center;">My Page</h1>

Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?id=132

Re: going crazy

Quoted text here. Click to load it
Yes, this is the simple way to do it. My long preamble was because for some
reason I was thinking of the problem when a h1 block needs to be centered
because it has a visible border.

Site Timeline