Simple HTML question

Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.

Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

3 Pages
1
2
3
→

You cannot start a new topic
You cannot reply to this topic

Simple HTML question Vertical middle of a page?

#1 patbox

Senior Member

Group: Members
Posts: 456
Joined: 06-February 09
Gender:Male

Posted 28 March 2009 - 06:44 PM

This is probably a very simple question, but I could not solve it:

How do I achieve to display text in the vertical middle of the page?

(It is easy to do it horizontally with align="center", but to do it vertically probably need a bit of trick.)

Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#2 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 28 March 2009 - 06:55 PM

style="margin-top:50%; margin-bottom:50%;"

Right off the top of my head......

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#3 patbox

Senior Member

Group: Members
Posts: 456
Joined: 06-February 09
Gender:Male

Posted 28 March 2009 - 09:09 PM

groovicus, on Mar 29 2009, 01:55 AM, said:

style="margin-top:50%; margin-bottom:50%;"

Right off the top of my head......

Thanks, I tested it. It does not seem to work. This is what I did:

<body style="margin-top:50%; margin-bottom:50%;">
<center>
hello
</center>
</body>

And it gave me a long vertical slide bar, and the text was off the screen, I had to scroll down. Check that out.

Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#4 patbox

Senior Member

Group: Members
Posts: 456
Joined: 06-February 09
Gender:Male

Posted 28 March 2009 - 09:16 PM

You gave me a good motivation and I think I found the solution:

<body>
<table width=100% height=100%>
<tr><td>
<center>
hello
</center>
</td></tr>
</table>
</body>

Strange enough it gives text to the middle of the page. It seems that <center> works both vertically and horizontally.

Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#5 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 29 March 2009 - 09:49 AM

a. You are using improper markup to center your text. If you want to center your text in a table cell, you use align="center"
b. <center> is deprecated, which means that it should not be used at all. There may come a point in time where browsers quit supporting it, and your page will break.
c. center has nothing to do with vertical alignment.
:thumbsup:

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#6 patbox

Senior Member

Group: Members
Posts: 456
Joined: 06-February 09
Gender:Male

Posted 29 March 2009 - 02:31 PM

groovicus, on Mar 29 2009, 04:49 PM, said:

Yes I noticed. I cant put an embedded object or a picture to the center of page, what ever I do, what ever I try.

All I want is to put e.g. a picture to the center of a page (vertically and horizontally).

I guess the solution would be to create some table %100 x %100 and align it vertically, but nothing works for me

:-(

Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#7 burn1337

Forum Regular

Group: Banned
Posts: 311
Joined: 07-March 09

Posted 29 March 2009 - 11:22 PM

with CSS2, you could do that with "<div style="position: absolute; top: 50%; left: 50%;"><img src="PathToImage" /></div>" You could also do "margin-bottom: 50%; margin-top:(if this would be needed, don't remember) 50%; margin-left:(not sure if left is the right argument) 50%;" There is also "valign=center align=center" Though that has been deprecated...

#8 patbox

Senior Member

Group: Members
Posts: 456
Joined: 06-February 09
Gender:Male

Posted 30 March 2009 - 09:44 PM

burn1337, on Mar 30 2009, 06:22 AM, said:

Ok I will try that. This sounds good. No idea what is CSS2, but I sow the <div> tags somewhere. I will also try the valign parameter. Was align depreciated as well? I use align in 100% of my scripts.

The margin-bottom and margin-top did not for for me. I.e. the picture has 20% of the website side, and I put margin-top and margin-bottom at 50%--- I am left with a page of 120% size and ugly side bars.

Thank you all for the great suggestions. Keep me posted.

Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#9 burn1337

Forum Regular

Group: Banned
Posts: 311
Joined: 07-March 09

Posted 30 March 2009 - 10:21 PM

Well you could try the margins at 25%... The CSS2 is not supported by Internet Explorer... Yes I do believe align has been depreciated, I haven't used it in some time now... You could also try using the picture in the background... Using CSS, you could easily position it to be centered...

#10 patbox

Senior Member

Group: Members
Posts: 456
Joined: 06-February 09
Gender:Male

Posted 30 March 2009 - 10:56 PM

burn1337, on Mar 31 2009, 05:21 AM, said:

a. But if I position it with CSS all my readers using IE will will not see it in the middle? That is a big price.
b. I could live it putting it down with at least 25% margins.. not perfect but better then <br><br><br>
c. What do you use if not align? How anything be done without align="center"?

Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#11 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 30 March 2009 - 11:15 PM

Quote

But if I position it with CSS all my readers using IE will will not see it in the middle? That is a big price.

Yeah, well this statement is incorrect:

Quote

CSS2 is not supported by Internet Explorer

CSS2 has been a standard since 1998, and just underwent a minor revision last year. Perhaps he meant CSS3?

Quote

What do you use if not align? How anything be done without align="center"?

You use CSS styles.
http://www.quackit.com/css/css_align.cfm
http://www.ehow.com/how_2284643_left-right...-align-css.html

Incidentally, if you have a question about which tags are deprecated, or how to use the tags, use a search like this:inurl: w3c.org align. Replace 'align' with any tag that you are questioning. The text will tell you exactly which browsers trip over which tags, or which tags are deprecated, etc.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#12 burn1337

Forum Regular

Group: Banned
Posts: 311
Joined: 07-March 09

Posted 31 March 2009 - 01:08 PM

No CSS2, position, and top, left/right, is a part of CSS2, Internet Explorer does not support those... Supposedly Internet Explorer 8 is supposed to support some aspects of CSS2, but they are not going to completely support CSS2 or 3..
Patbox - You can have the image as a background image, the css for changing the position of a background image is supported with Internet Explorer.

#13 patbox

Senior Member

Group: Members
Posts: 456
Joined: 06-February 09
Gender:Male

Posted 31 March 2009 - 09:31 PM

burn1337, on Mar 31 2009, 08:08 PM, said:

Patbox - You can have the image as a background image, the css for changing the position of a background image is supported with Internet Explorer.

The image was an example, in fact I want to put embedded objects to the middle of page (like videos). I am really shocked how many differences there are between FF and IE (probably also OPera does its own stuff).

Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#14 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 31 March 2009 - 09:45 PM

Quote

No CSS2, position, and top, left/right, is a part of CSS2

That is hardly the same as IE not supporting CSS2. What you meant was that it doesn't support some elements. :thumbsup:

Quote

I am really shocked how many differences there are between FF and IE

Why? Are you shocked at the difference between VW, Ferrari ,and Volvo? They are completely independent projects. Why would you expect them to behave the same way? This has been the bane of web developers for years.
The problem that you are trying to solve is that you want different types of objects to behave in the same way, and that isn't going to happen. The best you can do is center an IFrame or a Div, and then feed the content into that container.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#15 burn1337

Forum Regular

Group: Banned
Posts: 311
Joined: 07-March 09

Posted 31 March 2009 - 10:31 PM

No, I mean that prior to IE8, IE had no support for CSS2... (If I remember correctly, IE7, didn't have support for CSS2 either...)
Patbox - Ok so you want an image in the center of the page, but you also want objects in the center of the page... So are you wanting the objects to overlay the picture, or are you wanting the picture to overlay the objects? btw with the method I said, you don't have to have it as the background of all your pages, I meant in the div you want to display it, set it as it's background pic, and use the background alignment capabilities...