div & vertical alignment...

[Mel]

i have a div with with 300 and height 100
i need to place a text centered withing this box, can someone please help ?

thankx
Mel

[Els]

Mel wrote:

i have a div with with 300 and height 100
i need to place a text centered withing this box, can someone please help ?

http://dorward.me.uk/www/centre/

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Mel]

sorry i take my question back. i have the same div as before, but would like
to have a submit button centered within the div box

all i see floating around is "text-align:center" and that does not do the
job since the content of the div is a form element and not text

thankx for 'er help

"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...

Mel wrote:

i have a div with with 300 and height 100
i need to place a text centered withing this box, can someone please

help ?
http://dorward.me.uk/www/centre/

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Mel wrote:

sorry i take my question back. i have the same div as before, but would like
to have a submit button centered within the div box

all i see floating around is "text-align:center" and that does not do the
job since the content of the div is a form element and not text

Why don't you give a url or at least a bit of the code?
A form element too can be centered using text-align:center.
It doesn't just apply to text.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Brian]

Mel wrote:

sorry i take my question back.

Stop top-posting, or you'll just get killfiled by the regulars.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Gus Richter]

Mel wrote:

sorry i take my question back. i have the same div as before, but would like
to have a submit button centered within the div box

all i see floating around is "text-align:center" and that does not do the
job since the content of the div is a form element and not text

thankx for 'er help

The trick to center Vertically and Horizontally, is to place the item(s)
you wish to center into a div and then position the div at 50% both
vertically and horizontally and then set its margin-left to negative
width/2 and its margin-top to negative height/2. Of course, you must
know the width and height.
See it in action at: http://milov.nl/code/css/verticalcenter.html

--
Gus

[Els]

Gus Richter wrote:

The trick to center Vertically and Horizontally, is to place the item(s)
you wish to center into a div and then position the div at 50% both
vertically and horizontally and then set its margin-left to negative
width/2 and its margin-top to negative height/2. Of course, you must
know the width and height.
See it in action at: http://milov.nl/code/css/verticalcenter.html

So why put the item in a div first, and not give the
position and negative margins to the item itself?
Also:
- be aware of content becoming inaccessible if the viewport
is smaller than the outer div. (not likely a problem with a
submit button ;-) )
- to use position absolute on the inner div or item, the
outer div needs to be positioned too. This is not always an
option, especially in a flexible design with floats.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[brucie]

in post: <news:c8**********@s0b1a68.ssa.gov>
Mel <me**********@ssa.gov> said:

i have a div with with 300 and height 100 i need to place a text
centered withing this box, can someone please help ?

div{width:300px;height:100px;display:table-cell;vertical-align:middle;}

not supported by IE

How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

--
b r u c i e

[Gus Richter]

Els wrote:

Gus Richter wrote:

The trick to center Vertically and Horizontally, is to place the
item(s) you wish to center into a div and then position the div at 50%
both vertically and horizontally and then set its margin-left to
negative width/2 and its margin-top to negative height/2. Of course,
you must know the width and height.
See it in action at: http://milov.nl/code/css/verticalcenter.html

So why put the item in a div first, and not give the position and
negative margins to the item itself?
Also:
- be aware of content becoming inaccessible if the viewport is smaller
than the outer div. (not likely a problem with a submit button ;-) )
- to use position absolute on the inner div or item, the outer div needs
to be positioned too. This is not always an option, especially in a
flexible design with floats.

Yep, should work.

--
Gus

[Gus Richter]

Els wrote:

Gus Richter wrote:

The trick to center Vertically and Horizontally, is to place the
item(s) you wish to center into a div and then position the div at 50%
both vertically and horizontally and then set its margin-left to
negative width/2 and its margin-top to negative height/2. Of course,
you must know the width and height.
See it in action at: http://milov.nl/code/css/verticalcenter.html

So why put the item in a div first, and not give the position and
negative margins to the item itself?
Also:
- be aware of content becoming inaccessible if the viewport is smaller
than the outer div. (not likely a problem with a submit button ;-) )
- to use position absolute on the inner div or item, the outer div needs
to be positioned too. This is not always an option, especially in a
flexible design with floats.

Oh, and thanks for the other two items. I will look into them when time
allows.

--
Gus

[Lauri Raittila]

Gus Richter wrote:

Mel wrote:

sorry i take my question back. i have the same div as before, but would like
to have a submit button centered within the div box

all i see floating around is "text-align:center" and that does not do the
job since the content of the div is a form element and not text

thankx for 'er help

The trick to center Vertically and Horizontally, is to place the item(s)
you wish to center into a div and then position the div at 50% both
vertically and horizontally and then set its margin-left to negative
width/2 and its margin-top to negative height/2. Of course, you must
know the width and height.
See it in action at: http://milov.nl/code/css/verticalcenter.html

Does not work. You forgot that body which contains only absolutely
positioned stuff has 0 height. I may look okey in quirk modes of some
browsers, but that is not making it good.

The ways to vertically center is setting margins of absolutely positioned
to auto, or setting outer containers type to table-cell and using
vertical-align.

There is also other ways to center things:
http://www.student.oulu.fi/~laurirai/www/css/middle/

(I still haven't gotten around of making examples centering something on
viewport...)
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Gus Richter]

Lauri Raittila wrote:

Gus Richter wrote:

Mel wrote:

sorry i take my question back. i have the same div as before, but would like
to have a submit button centered within the div box

all i see floating around is "text-align:center" and that does not do the
job since the content of the div is a form element and not text

thankx for 'er help

The trick to center Vertically and Horizontally, is to place the item(s)
you wish to center into a div and then position the div at 50% both
vertically and horizontally and then set its margin-left to negative
width/2 and its margin-top to negative height/2. Of course, you must
know the width and height.
See it in action at: http://milov.nl/code/css/verticalcenter.html

Does not work. You forgot that body which contains only absolutely
positioned stuff has 0 height. I may look okey in quirk modes of some
browsers, but that is not making it good.

Well, God knows that there are a lot of things that I don't know, but I
know that it *does* work, also with strict, in Gecko, IE and Opera (with
some calculation problems still in 7.5). You should actually try it
before making such a firm statement! [See example below.]
The ways to vertically center is setting margins of absolutely positioned
to auto, or setting outer containers type to table-cell and using
vertical-align.

There is also other ways to center things:
http://www.student.oulu.fi/~laurirai/www/css/middle/
There are many ways to skin a cat. I presented one way.
(I still haven't gotten around of making examples centering something on
viewport...)

Well, this will help to get you started (absolute positioning & strict):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>css vertical center</title>
<style type="text/css">
.outer
{
position:absolute;
left:50%;
top:50%;
width:50px;
height:50px;
margin-left:-25px;
margin-top:-25px;
background-color:#9cf;
border:1px solid red;
}
.inner
{
position:absolute;
left:50%;
top:50%;
width:20px;
height:20px;
margin-left:-10px;
margin-top:-10px;
background-color:#c9f;
border:1px solid red;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>

[Lauri Raittila]

Gus Richter wrote:

Lauri Raittila wrote:

Gus Richter wrote:

See it in action at: http://milov.nl/code/css/verticalcenter.html

Does not work.

Well, God knows that there are a lot of things that I don't know, but I

....

I tried it, and it didn't work. Problem was that I had userstylesheet
rule that contradicted your effort. I didn't remember I had one, and
forgot to disable userstylesheet for moment. I am really sorry, I should
have looked the source...
The ways to vertically center is setting margins of absolutely positioned
to auto, or setting outer containers type to table-cell and using
vertical-align.
Of course the best ways don't work on IE...
There is also other ways to center things:
http://www.student.oulu.fi/~laurirai/www/css/middle/

There are many ways to skin a cat. I presented one way.

Yes, way that is most supported. That also breaks easiest, which is a
problem soemtimes.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Gus Richter]

Lauri Raittila wrote:

Gus Richter wrote:

There are many ways to skin a cat. I presented one way.

Yes, way that is most supported. That also breaks easiest, which is a
problem soemtimes.

Care to expand on why and in which instance you believe it to breaks the
easiest? Can you also present an example?

--
Gus

[Lauri Raittila]

Gus Richter wrote:

Lauri Raittila wrote:

Gus Richter wrote:

There are many ways to skin a cat. I presented one way.

Yes, way that is most supported. That also breaks easiest, which is a
problem soemtimes.

Care to expand on why and in which instance you believe it to breaks the
easiest? Can you also present an example?

Try your code in 40px by 40px window. Of course, it doesn't mather here,
as practically nobody uses that small window (you should see that you
can't see whole box, as you can't scroll to right or up). But if you
would do centering on something bigger, you ran in problems sometimes.
There is no this kind of problem, if you use margins or display:table-
cell to center...

You could get rid of this problem using min-width, but as you only need
to do this kind of centering for IE, it is not really helping much...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Gus Richter]

Lauri Raittila wrote:

Gus Richter wrote:

Lauri Raittila wrote:

Gus Richter wrote:
There are many ways to skin a cat. I presented one way.

Yes, way that is most supported. That also breaks easiest, which is a
problem soemtimes.

Care to expand on why and in which instance you believe it to breaks the
easiest? Can you also present an example?

Try your code in 40px by 40px window. Of course, it doesn't mather here,
as practically nobody uses that small window (you should see that you
can't see whole box, as you can't scroll to right or up). But if you
would do centering on something bigger, you ran in problems sometimes.
There is no this kind of problem, if you use margins or display:table-
cell to center...

You could get rid of this problem using min-width, but as you only need
to do this kind of centering for IE, it is not really helping much...

I'm sorry, but I just don't understand what you're driving at. It does
not make any sense to make a smaller viewport. If the content is greater
than the viewport, applying overflow:auto for example, will provide
the necessary scrollbars. Does the following example help? Can you make
a modification to demonstrate what you believe to be problematic at times?

--
Gus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>css vertical center</title>
<style type="text/css">
.wrapper
{
position:absolute;
left:200px;
top:100px;
width:300px;
height:300px;
background-color:#945;
border:1px solid blue;
overflow:auto;
}
.outer
{
position:absolute;
left:50%;
top:50%;
width:200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
background-color:#9cf;
border:1px solid red;
overflow:auto;
}
.inner
{
position:absolute;
left:50%;
top:50%;
width:140px;
height:140px;
margin-left:-70px;
margin-top:-70px;
background-color:#c9f;
border:1px solid red;
overflow:auto;
}
p {font-family:sans-serif;}
</style>
</head>
<body>
<div class="wrapper">
<div class="outer">
<p>This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
</p>
<pre>
This line is to bring up the Horizontal Scrollbar.
</pre>
<div class="inner">
<p>This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
</p>
</div>
</div>
</div>
</body>
</html>

[Lauri Raittila]

Gus Richter wrote:

Lauri Raittila wrote:

Try your code in 40px by 40px window. Of course, it doesn't mather here,
as practically nobody uses that small window (you should see that you
can't see whole box, as you can't scroll to right or up). But if you
would do centering on something bigger, you ran in problems sometimes.
There is no this kind of problem, if you use margins or display:table-
cell to center...

I'm sorry, but I just don't understand what you're driving at. It does
not make any sense to make a smaller viewport. If the content is greater
than the viewport, applying overflow:auto for example, will provide
the necessary scrollbars.
No it does not. Try yourself. On the page where you have something
centered in the viewport. Of course it is not possible to see any
downside, if you don't center your thing in viewport, like in example you
included this message.
Does the following example help? Can you make
a modification to demonstrate what you believe to be problematic at times?

Removed div classed wrapper, that was not centered, added somethings
required to make body content centered (first line of CSS)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>css vertical center</title>
<style type="text/css">
html, body {height:100%;padding:0;margin:0}
.outer
{
position:absolute;
left:50%;
top:50%;
width:200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
background-color:#9cf;
border:1px solid red;
overflow:auto;
}
.inner
{
position:absolute;
left:50%;
top:50%;
width:140px;
height:140px;
margin-left:-70px;
margin-top:-70px;
background-color:#c9f;
border:1px solid red;
overflow:auto;
}
p {font-family:sans-serif;}
</style>

<div class="outer">
<p>This is some text for a filler. This is some text for filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
</p>
<pre>
This line is to bring up the Horizontal Scrollbar.
</pre>
<div class="inner">
<p>This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a iller.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
</p>
</div>
</div>
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Gus Richter]

Lauri Raittila wrote:

Gus Richter wrote:

Lauri Raittila wrote:

I'm sorry, but I just don't understand what you're driving at. It does
not make any sense to make a smaller viewport. If the content is greater
than the viewport, applying overflow:auto for example, will provide
the necessary scrollbars.

No it does not. Try yourself. On the page where you have something
centered in the viewport. Of course it is not possible to see any
downside, if you don't center your thing in viewport, like in example you
included this message.

Does the following example help? Can you make
a modification to demonstrate what you believe to be problematic at times?

Removed div classed wrapper, that was not centered, added somethings
required to make body content centered (first line of CSS)

I tried it with your modifications and it still looks OK in Geckos, IE
and Opera. What am I missing?

--
Gus

[Lauri Raittila]

Gus Richter wrote:

Lauri Raittila wrote:

Gus Richter wrote:

I'm sorry, but I just don't understand what you're driving at. It does
Can you make
a modification to demonstrate what you believe to be problematic at times?

Removed div classed wrapper, that was not centered, added somethings
required to make body content centered (first line of CSS)

I tried it with your modifications and it still looks OK in Geckos, IE
and Opera. What am I missing?

Did you try it in small enaugh window? So that window is smaller than the
content you try to center?

Maybe you can see if you use this, where I did make the center box a bit
bigger, as you seem to not understand to make your window smaller:

Notice that you can't see whole blue box, even with using scrolbar.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>css vertical center</title>
<style type="text/css">
html, body {height:100%;padding:0;margin:0}
.outer
{
position:absolute;
left:50%;
top:50%;
width:1300px;
height:1300px;
margin-left:-650px;
margin-top:-650px;
background-color:#9cf;
border:1px solid red;
overflow:auto;
}

</style>

<div class="outer">
<p>This is some text for a filler. This is some text for filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
This is some text for a filler. This is some text for a filler.
</p>

</div>
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Gus Richter]

Lauri Raittila wrote:

Gus Richter wrote:

Lauri Raittila wrote:

Gus Richter wrote:
I'm sorry, but I just don't understand what you're driving at. It does
Can you make
a modification to demonstrate what you believe to be problematic at times?

Removed div classed wrapper, that was not centered, added somethings
required to make body content centered (first line of CSS)
I tried it with your modifications and it still looks OK in Geckos, IE
and Opera. What am I missing?

Did you try it in small enaugh window? So that window is smaller than the
content you try to center?

Sure did. To such an extent that it got ridiculous.
BTW, I did not only try to center, but succeeded.
Maybe you can see if you use this, where I did make the center box a bit
bigger, as you seem to not understand to make your window smaller:

Notice that you can't see whole blue box, even with using scrolbar.

And this is your reservation?
All you did was to move the box out of the viewport.
I have used this feature to slide a box in and out of view.
It is only a reservation for anyone not able to calculate/envision
dimensions.
Thank you for proving to me that this method is rock solid.
It certainly should be since we're simply centering the top left corner
of the element and then negatively offsetting the element by half of its
width/height in order to achieve centering to the center of the element.
Another advantage to this method, is that we're not limited to only
centering, but being able to place the center of the element to a
specific point in the viewport.

--
Gus

[Lauri Raittila]

Gus Richter wrote:

Lauri Raittila wrote:

Did you try it in small enaugh window? So that window is smaller than the
content you try to center?
Sure did. To such an extent that it got ridiculous.
BTW, I did not only try to center, but succeeded.

The problem is not in the centering, this method centers stuff every
time.

Maybe you can see if you use this, where I did make the center box a bit
bigger, as you seem to not understand to make your window smaller:

Notice that you can't see whole blue box, even with using scrolbar.

And this is your reservation?
All you did was to move the box out of the viewport.

Exacty. This method *requires* moving box outside viewport, as it uses
negative margin. Exeption being when margin is set using percentage.
I have used this feature to slide a box in and out of view.
It is only a reservation for anyone not able to calculate/envision
dimensions.
You still didn't see the problem, did you? The problem is that if the
thing you center is bigger than viewport, content is inaccessible.

Anly way to not get to this trap is to define content size using
percentage, which most likely causes problems.
Thank you for proving to me that this method is rock solid.
Too solid. It is ok as long as you know the minimum width and height of
containing box. In case of viewport, you don't know them, and can't set
them, if browser is IE.
It certainly should be since we're simply centering the top left corner
of the element and then negatively offsetting the element by half of its
width/height in order to achieve centering to the center of the element.
Another advantage to this method, is that we're not limited to only
centering, but being able to place the center of the element to a
specific point in the viewport.

Yes. But when you have bigger element than screen, you get it top and
left edge outside viewport, and you can't access it using any browser. So
this method of centering is not suitable, if you center for example
750px*550px page, as you end up not seeing the heading when you have
400px heigh window. If you use either of other methods, this doesn't
happen. Those other methods don't work on IE to vertically center stuff,
so there is no way to vertically center stuff in IE to viewport, whiout
making assumption that your content will fit the window.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Gus Richter]

Lauri Raittila wrote:

Gus Richter wrote:

Lauri Raittila wrote:

Did you try it in small enaugh window? So that window is smaller than the
content you try to center?
Sure did. To such an extent that it got ridiculous.
BTW, I did not only try to center, but succeeded.

The problem is not in the centering, this method centers stuff every
time.

So why the insinuation that it did not work with the word *try* ?

Maybe you can see if you use this, where I did make the center box a bit
bigger, as you seem to not understand to make your window smaller:

Notice that you can't see whole blue box, even with using scrolbar.

And this is your reservation?
All you did was to move the box out of the viewport.

Exacty. This method *requires* moving box outside viewport, as it uses
negative margin. Exeption being when margin is set using percentage.

Ok, ok ..... with the *extreme* situation as per your example, this
method is not suitable. Just as for other things, any one method is not
suitable for every given situation. Change a variable and another method
must be considered, or find a workaround. In my opinion, your argument
is not a realistic, real-world example. Why would I wish to center such
a monstrosity? If I wished to center such a thing, then I would simply
use margin:auto;. This has been a response to a real-world requirement
which in my opinion has merit in certain situations. Take it or leave
it, but don't say "it does not work".

I have used this feature to slide a box in and out of view.
It is only a reservation for anyone not able to calculate/envision
dimensions.

You still didn't see the problem, did you? The problem is that if the
thing you center is bigger than viewport, content is inaccessible.

I cannot image anyone so foolish as to not realize that applying a
negative margin, may move the content out of the viewport, depending on
other properties applied. I agree that a *caveat* should be applied to
this method, regarding this, but not that this method does not work. In
fact, I believe that the CSS specs mention such a caveat somewhere. I
can look it up if you wish.
Anly way to not get to this trap is to define content size using
percentage, which most likely causes problems.

Let's not get into hypothetical things again.

Thank you for proving to me that this method is rock solid.

Too solid. It is ok as long as you know the minimum width and height of
containing box. In case of viewport, you don't know them, and can't set
them, if browser is IE.

I believe that I was able to give an example with percentages which
worked in Mo, IE and Op.

It certainly should be since we're simply centering the top left corner
of the element and then negatively offsetting the element by half of its
width/height in order to achieve centering to the center of the element.
Another advantage to this method, is that we're not limited to only
centering, but being able to place the center of the element to a
specific point in the viewport.

Yes. But when you have bigger element than screen, you get it top and
left edge outside viewport, and you can't access it using any browser. So
this method of centering is not suitable, if you center for example
750px*550px page, as you end up not seeing the heading when you have
400px heigh window. If you use either of other methods, this doesn't
happen. Those other methods don't work on IE to vertically center stuff,
so there is no way to vertically center stuff in IE to viewport, whiout
making assumption that your content will fit the window.

I believe that I have covered this with the "Ok,ok ..." and the *caveat*
above. Are we now in agreement?

--
Gus

[Lauri Raittila]

Gus Richter wrote:

Lauri Raittila wrote: Ok, ok ..... with the *extreme* situation as per your example .... Take it or leave it, but don't say "it does not work".
Did I actually say "it doesn't work". No I did not. I said "Yes, way that
is most supported. That also breaks easiest, which is a
problem soemtimes."

So, I never claimed it to be that bad, just worse than others, but better
supported.
I believe that I was able to give an example with percentages which
worked in Mo, IE and Op.

The problem is that there is no need to use negative margin in
percenteges - if you know margin in percentege, you can just as well
apply it to the thing centered.

Yes. But when you have bigger element [...]

I believe that I have covered this with the "Ok,ok ..." and the *caveat*
above. Are we now in agreement?

I think so. But people try this method very often when centering their
800px wide fixed page, and it fails badly.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä