473,881 Members | 1,708 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to center vertically ?

FL
Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?
Jul 20 '05
27 9271
DU <dr*******@hotW IPETHISmail.com > wrote in
<bv**********@n ews.eusc.inter. net>
FL wrote:
Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?


<style type="text/css" media="all">
#TheBoxToCenter Vertically
{
width:356px;
height:124px;
background-color:yellow;
}

#Container
{
position:absolu te;
top:50%;
left:50%;
margin-top:-62px;
margin-left:-178px;
}
</style>
</head>

<body>
<div id="Container" >
<div id="TheBoxToCen terVertically"> inline or block stuff here</div>
</div>

will center vertically TheBoxToCenterV ertically in any/all CSS2
compliant browsers regardless of current browser viewport dimensions.

No javascript. No table design. No nested tables. No frames. No ugly,
deprecated, obsolete, invalid stuff. No non-sense tricks or complex
hack. No kidding.

That's odd, the bit where the CSS negative margin method was mentioned
earlier in the thread seems to have been lost; same with the bit that said
it "breaks if the div is bigger than the window - you can't scroll left or
up to see the hidden material"

;)

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

Jul 20 '05 #11
Els
PeterMcC wrote:
DU wrote:
FL wrote:
Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?

[snip code using css negative margins]
will center vertically TheBoxToCenterV ertically in any/all CSS2
compliant browsers regardless of current browser viewport dimensions.

No javascript. No table design. No nested tables. No frames. No ugly,
deprecated, obsolete, invalid stuff. No non-sense tricks or complex
hack. No kidding.


That's odd, the bit where the CSS negative margin method was mentioned
earlier in the thread seems to have been lost; same with the bit that said
it "breaks if the div is bigger than the window - you can't scroll left or
up to see the hidden material"

;)


Nah, it didn't get lost, it's still there.
But this is not the same thread, or more accurate, it's not
the same branch of the thread ;-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #12
Els <el***********@ tiscali.nl.inva lid> wrote in
<40************ **********@drea der2.news.tisca li.nl>
PeterMcC wrote:
DU wrote:
FL wrote:

Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?
[snip code using css negative margins]
will center vertically TheBoxToCenterV ertically in any/all CSS2
compliant browsers regardless of current browser viewport
dimensions.

No javascript. No table design. No nested tables. No frames. No
ugly, deprecated, obsolete, invalid stuff. No non-sense tricks or
complex hack. No kidding.


That's odd, the bit where the CSS negative margin method was
mentioned earlier in the thread seems to have been lost; same with
the bit that said it "breaks if the div is bigger than the window -
you can't scroll left or up to see the hidden material"

;)


Nah, it didn't get lost, it's still there.
But this is not the same thread, or more accurate, it's not
the same branch of the thread ;-)

So it is - it was the reference to "ugly, deprecated, obsolete, invalid
stuff" that looked familiar.

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

Jul 20 '05 #13
DU
PeterMcC wrote:
DU <dr*******@hotW IPETHISmail.com > wrote in
<bv**********@n ews.eusc.inter. net>
FL wrote:

Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?


<style type="text/css" media="all">
#TheBoxToCent erVertically
{
width:356px ;
height:124p x;
background-color:yellow;
}

#Container
{
position:abso lute;
top:50%;
left:50%;
margin-top:-62px;
margin-left:-178px;
}
</style>
</head>

<body>
<div id="Container" >
<div id="TheBoxToCen terVertically"> inline or block stuff here</div>
</div>

will center vertically TheBoxToCenterV ertically in any/all CSS2
compliant browsers regardless of current browser viewport dimensions.

No javascript. No table design. No nested tables. No frames. No ugly,
deprecated, obsolete, invalid stuff. No non-sense tricks or complex
hack. No kidding.


That's odd, the bit where the CSS negative margin method was mentioned
earlier in the thread seems to have been lost; same with the bit that said
it "breaks if the div is bigger than the window - you can't scroll left or
up to see the hidden material"

;)


Sorry about that.
That page
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
by the way has a problem. Every div in that page is absolutely
positioned and won't work accordingly in Opera 7.x. If the page has
non-abs. pos. elements before and after the centered div, then it won't
work in opera 7.x. In any case, the problem is that both MSIE 6 and
Mozilla have a bug on abs. pos. elements:

"Bug 105286: viewport used as containing block for absolutely positioned
elements instead of root (percentage height, %, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

"A positioned element should be positioned to the nearest containing
positioned element, not the containing element."
http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
"The containing block for a positioned box is established by the nearest
positioned ancestor (or, if none exists, the initial containing block)"

So an abs. pos. child of the body element should be positioned regarding
the document, not the viewport according to W3C. AFAIK, only Opera 7.x
avoids this bug.

My solution (with position:fixed) will work for Opera 7.x and
Mozilla-based browsers and it will work if the document (or positioned
div) exceeds browser viewport dimensions.

DU
Jul 20 '05 #14
In article e n | c k m a wrote:
but I'm trying to center vertically a box, any idea to solve this?
can't be done without some kind of client-side scripting language
(JavaScript) - as far as I know.


That is totally untrue. CSS has many ways to do that.
http://www.student.oulu.fi/~laurirai/www/css/middle/

The problem is that IE has so little support for things. Min-height is
pretty much crusial when using different unit for centered element and
paret. There is workarounds for it though.
even then, how do you know it'll be effective?
Or more importantly, can you know it won't be defective?
can't you live without it?


Living whithout it is often best option.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #15
DU
Lauri Raittila wrote:
In article e n | c k m a wrote:
but I'm trying to center vertically a box, any idea to solve this?


can't be done without some kind of client-side scripting language
(JavaScript ) - as far as I know.

That is totally untrue. CSS has many ways to do that.
http://www.student.oulu.fi/~laurirai/www/css/middle/

The problem is that IE has so little support for things. Min-height is
pretty much crusial when using different unit for centered element and
paret. There is workarounds for it though.


Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element (the initial containing block is the containing block
of such abs. pos. element; that's clearly, word for word, explained in
section 10.1 of CSS2
http://www.w3.org/TR/CSS21/visudet.h...-block-details
). Now, the root element is not the browser viewport; it's the document
per se. So, Opera 7.x renders your case correctly: it is MSIE 6, Mozilla
and others which renders this wrong. I can document this with quotes
from W3C CSS2 and W3C CSS2.1. W3C also consistently repeats that the
positioning context for fixed elements is the viewport; that is NOT the
case for absolute positioning. Same with bugzilla:
"Bug 105286: viewport used as containing block for absolutely positioned
elements instead of root (percentage height, %, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

The addendum works for Mozilla 1.6, Opera 7.50 with or without non-abs.
positioned elements before and/or after the Container div. It works even
if the positioned Container div becomes wider/longer than the viewport.

DU
-------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head profile="http://www.ietf.org/rfc/rfc2731.txt">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="DC.subjec t" content="Center vertically a box">
<meta name="DC.date.c reated" content="2004-02-02T09:54:03+11: 00"
scheme="W3CDTF" >
<meta name="DC.date.m odified" content="2004-02-02T09:54:03+11: 00"
scheme="W3CDTF" >

<title>Center vertically a box in the viewport</title>

<style type="text/css" media="screen,t v,projection">
#TheBoxToCenter Vertically
{
width:356px;
height:124px;
background-color:yellow;
}

#Container
{
position:fixed;
/* no hack for MSIE for now */
top:50%;
left:50%;
margin-top:-62px;
margin-left:-178px;
}
</style>
</head>

<body>

<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<div id="Container" >
<div id="TheBoxToCen terVertically"> inline or block stuff here</div>
</div>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>

</body></html>

Jul 20 '05 #16
On 2004-02-05 14:48:28 +0100, Els <el***********@ tiscali.nl.inva lid> said:
>but I'm trying to center vertically a box, any idea to solve this?

example:
http://www.mediatech.nl/~rachel/Rachel/bp/Etretat7.html
css: http://www.mediatech.nl/~rachel/Rachel/bp.css

-- Els
Mente humana é como pára-quedas; funciona melhor aberta.


I like your Portuguese signature, els.

But your Etretat page is not centered vertically. Not in my setup anyway
(1024 x 820). If I increase it to 1280 x 1024, I can see the whole window,
but the pict is still not vertically centered.

Macintosh, Safari or Netscape 7.1.

François de Dardel
http:/mapage.noos.fr/dardelf
Faber est suae quisque fortunae
Remove fourteen to reply
Enlever le quatorze
Jul 20 '05 #17
In article DU wrote:
Lauri Raittila wrote:
CSS has many ways to do [vertical centering].
http://www.student.oulu.fi/~laurirai/www/css/middle/
Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element
I don't use absolute position relative to body on that page, so I wonder
what you mean. In fact, container is always relatively positioned, so ICB
confusion is not needed to be considered. If you use absolute position
way to center things in body, you of course also use height:100%, so that
it will take height of viewport (OTOH, it is arguable if 100% should be
height of viewport - but I have already forgotten if I was against or for
that, would need to read specs again.)

I wonder why everybody always think that vertical centering is only used
related to viewport. IMHO it hardly ever makes sence to center something
on viewport (even if I have pointed out how to do it many times). I have
no idea weather OP meaned it or not as OP didn't say.
Now, the root element is not the browser viewport;
That is clear.
it's the document per se. So, Opera 7.x renders your case correctly:
it is MSIE 6, Mozilla and others which renders this wrong. I can
document this with quotes from W3C CSS2 and W3C CSS2.1. W3C also
consistently repeats that the positioning context for fixed elements
is the viewport; that is NOT the case for absolute positioning. Same
with bugzilla: "Bug 105286: viewport used as containing block for
absolutely positioned elements instead of root (percentage height,
%, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

The addendum works for Mozilla 1.6, Opera 7.50 with or without non-abs.
positioned elements before and/or after the Container div. It works even
if the positioned Container div becomes wider/longer than the viewport.


You mean the thing is centered, but part of it will be outside canvas.
Canvas meaning area you can see using scrollbars. That is IMNSHO very
stupid indeed. It would be much better if centering would not happen when
centered thing is longer than viewport. I would use display:table method,
as if browser don't understand min-width, it will still work, or degrade
nicely.

Anyway, you should use max-height:100% and overflow:auto with
position:fixed elements, so that content would not be unaccessible.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #18
DU
Lauri Raittila wrote:
In article DU wrote:
Lauri Raittila wrote:
CSS has many ways to do [vertical centering].
http://www.student.oulu.fi/~laurirai/www/css/middle/


Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element

I don't use absolute position relative to body on that page, so I wonder
what you mean.


This is your last section:
"Using absolute positioning and negative margin"
no?

In fact, container is always relatively positioned, so ICB confusion is not needed to be considered. If you use absolute position
way to center things in body, you of course also use height:100%, so that
it will take height of viewport (OTOH, it is arguable if 100% should be
height of viewport - but I have already forgotten if I was against or for
that, would need to read specs again.)
height:100% for an abs. pos. element which is a child of the body is
relative to the document (root element), not the viewport. Again,
section 10.1 of CSS2.1 is utterly clear on what is implied for abs. pos.
elements.

I wonder why everybody always think that vertical centering is only used
related to viewport.
Well, I fail to see what usage you could find in positioning an element
in the middle of the document (when the document overflows the
viewport). That would mean that sometimes you see the positioned
element, sometimes you don't; you would need to scroll down/up the
document view to see that abs. pos.

IMHO it hardly ever makes sence to center something on viewport (even if I have pointed out how to do it many times).
You can replace frames entirely with positioning relative to viewport.
Sidebar, footer, fixed nav. blocks etc... are doable without any frames.

I have no idea weather OP meaned it or not as OP didn't say.

Now, the root element is not the browser viewport;

That is clear.

it's the document per se. So, Opera 7.x renders your case correctly:
it is MSIE 6, Mozilla and others which renders this wrong. I can
document this with quotes from W3C CSS2 and W3C CSS2.1. W3C also
consistentl y repeats that the positioning context for fixed elements
is the viewport; that is NOT the case for absolute positioning. Same
with bugzilla: "Bug 105286: viewport used as containing block for
absolutely positioned elements instead of root (percentage height,
%, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

The addendum works for Mozilla 1.6, Opera 7.50 with or without non-abs.
positioned elements before and/or after the Container div.


It works even
if the positioned Container div becomes wider/longer than the viewport.

You mean the thing is centered, but part of it will be outside canvas.
Canvas meaning area you can see using scrollbars.


W3C does not define canvas in that manner. What you say is not clear. Say:
div#idText {position:absol ute; top:-250px; left:-500px;}
Now, this idText won't be reachable, accessible with scrollbars:
depending on your definition of canvas, you would say that this idText
is not part of the canvas since you can't reach it with scrollbars while
the W3C says: "the space where the formatting structure is rendered; the
canvas is infinite for each dimension of the space."
"The canvas is the entire 'surface' on which the document is laid out."
So, I'm not sure why this idText would not part of the canvas the way
W3C defines it.

That is IMNSHO very stupid indeed. It would be much better if centering would not happen when
centered thing is longer than viewport. I would use display:table method,
as if browser don't understand min-width, it will still work, or degrade
nicely.

Anyway, you should use max-height:100% and overflow:auto with
position:fixed elements, so that content would not be unaccessible.


overflow:auto makes sense but I fail to see why max-height is needed or
height:100% is needed. The demopage I provided works and it works IMO
according to the way W3C defined position:absolu te, containing blocks
and position:fixed.

DU
Jul 20 '05 #19
Els
Franois de Dardel wrote:
On 2004-02-05 14:48:28 +0100, Els <el***********@ tiscali.nl.inva lid> said:
>>>>but I'm trying to center vertically a box, any idea to solve this?

example:
http://www.mediatech.nl/~rachel/Rachel/bp/Etretat7.html
css: http://www.mediatech.nl/~rachel/Rachel/bp.css

But your Etretat page is not centered vertically. Not in my setup anyway
(1024 x 820). If I increase it to 1280 x 1024, I can see the whole
window, but the pict is still not vertically centered.

Macintosh, Safari or Netscape 7.1.


It is here, (pc), I don't have a Mac to test.
Could you please make a printscreen for me and upload it
somewhere or send it to me?

I'd be grateful :-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.
Another one, for François:
Sonhos vem. Sonhos vão. O resto é imperfeito.
-Renato Russo-

Jul 20 '05 #20

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
23089
by: Tony Vasquez | last post by:
Can somoene give me an example of how to center a div, according to it's image size... I am using different images, and so I have to resize it in a functino according to the image's size. So I use a h and w vairable that give me the height and width of the current image, but I can't seem to come up with a simple freaking formula to center the image vertically and horozontally. Thanks guys. fnFullView = function () { var h var w
10
26891
by: john T | last post by:
Is there anyway to vertically center a html table using css in such a way it does not alter the html table. When I tryied it just screws up.
10
10368
by: Unknown User | last post by:
Yet another question about vertical centering: How can I center a page vertically? I have searched on Google and didn't find anything that works at least on IE, Opera and Mozilla: http://milov.nl/code/css/verticalcenter.html Or using a table: http://www.quirksmode.org/css/centering.html Is there a way to do it and that works in Opera, IE and Mozilla? Thanks,
11
3088
by: Serg | last post by:
I had some CSS problems, and they were solved by someone who pointed out to me that I should have <!DOCTYPE ..... at the top of my code, which I now do. And it fixed all the inheritance problems, but it caused my ability to center Tables vertically to disappear. If I remove that top line, all is good. Except for my previous inheritance problems. The thing is my code calls one funtion with the parameter $out_msg which is always in...
1
2301
by: Rabbit | last post by:
Dear All I'm new to use ASP.Net for developement, can someone tell me how can I create a web form with size say 300px x 300px, align vertically center on the page Because so far I can use Div to align it horizontally center on the page, but I still can't find out how to do the "Vertically-center alignment"! 'cause I really want such form/table can be located center in the web page.
4
3776
by: John | last post by:
Is it possible to center a memo field value vertically? I use a memo field for printing address labels and I would like the addresses to show up centered vertically. Thanks, john
2
2778
by: jerrygadd | last post by:
Can some body help me vertically center an image using CSS? The customer only uses IE, and so the code is not debugged for other browsers! The image in question is found on line 1075 : "div.layout_img img" The image size is unknown I have tried to use the "margin:0px auto;" method with no success. I include the code here
0
9928
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
11100
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10718
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10816
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10401
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7953
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7110
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5977
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4196
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.