vertical alignment

  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

I know that
Code: [ Select ]
margin-left:auto;
    margin-right:auto;
  1. margin-left:auto;
  2.     margin-right:auto;
will center the div in the middle

Is there anyway that I can center vertically too?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

In CSS2 there is a vertical-align element. Attributes are:

inherit
percentage
length
baseline
sub
super
top
text-top
middle
bottom
text-bottom

I'm not 100% certain, though which browsers support what. Might take some experimenting.
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

cool, thanks I will try them out
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

hmm it seems that it will only work with images in netscape 4.0+


well what I am basically trying to do is to center the whole page vertically and horizontally

Code: [ Select ]
div#maincon{
    width:700px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    border:none;
}
  1. div#maincon{
  2.     width:700px;
  3.     margin-left:auto;
  4.     margin-right:auto;
  5.     position:relative;
  6.     border:none;
  7. }


I don't think vertical-align is working for IE, but perhaps it is because I didn't specify a height?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

http://www.devguru.com/Technologies/css ... align.html

Noticed from the article: It appears this element appears to work on a "line" basis. In other words (as shown by the examples) it works on a line-by-line instance. I can't see that this may be workable in aligning a page., i.e. block elements)
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

I may just have to keep it centered horizontally, and top....thanks for your research
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

yeah - I played with your style and think I got the same results you were probably getting. Good luck!

Cheers

As an added note, I believe you can still use valign in the div tag and still have it validate. Although, I seem to remember it may be depricated, I think it still validates if used as an HTML/XHTML attribute (XHTML may only work if the doctype is transitional). I'm almost certain you can use percentage, pixels top middle and bottom attributes with HTML I seem to recall length gave me the best results.
  • Mr Smith
  • Graduate
  • Graduate
  • Mr Smith
  • Posts: 150
  • Loc: Birmingham, England

Post 3+ Months Ago

Vladdrac wrote:
well what I am basically trying to do is to center the whole page vertically and horizontally

Code: [ Select ]
div#maincon{
    width:700px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    border:none;
}
  1. div#maincon{
  2.     width:700px;
  3.     margin-left:auto;
  4.     margin-right:auto;
  5.     position:relative;
  6.     border:none;
  7. }



if i'm reading you right....you want your main page to be centered inside the borders of the browser window (all sides)?

if so, just stick the margin properties in the body tag:

Code: [ Select ]
<body topmargin="10" leftmargin="10".......etc. etc.>


maybe i've misunderstood your question, if so apologies in advance.

:)
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

well wouldn't those margins be a fixed height? I mean that it may be centered on my resolution, but others it would not be?
  • CrazyP
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13

Post 3+ Months Ago

try this

Code: [ Select ]
#body {
    position: absolute;
    left: 50%;
    width: 774px;
    margin-left: -387px;
    top: 50%;
    margin-top: -295px;
}
  1. #body {
  2.     position: absolute;
  3.     left: 50%;
  4.     width: 774px;
  5.     margin-left: -387px;
  6.     top: 50%;
  7.     margin-top: -295px;
  8. }


body is the container div for all my other content. margin left is negative half the width, margin-top is negative half the height. what this does is because the paddings are set to 50% of the screen, the o position of the body div starts in the middle of the screen. the negative values moves the positions to the left and up of that starting point exactly the amount of pixels you tell it to, hence why everything is centered

edit: hmm, I thought that would work. everything is working on res of 1024/768 and above, but lower res screws up. worth experimenting with ?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

CrazyP has the only (as far as I know way of vertical centering with css :( )

It works but has two key limitations (I may have missed some others but these are the important ones:
<ol><li>the container has to be fixed height, which means effectively no text-zoom = poor accessibility</li><li>If the viewport becomes smaller than the container, then the left/top edges disappear, again poor accessibility and look kinda crap :lol: this could be overridden with min-width and min-height if it weren't for the fact that those properties <b>do not work</b> in internet exploder.</li></ol>
Personally, I would avoid this method. If you absolutely must have vertical alignment and cannot do without it, then a table-based hack :shock: is probably the best way to go. Otherwise, I'd just put some extra padding on the top of the body, as vertical centering will only make much difference if you have a gimongous monitor (and they deserve to be punished because they make me jealous :lol: )

edit: just saw your edit, and I assume the "messing up" is the left and top disappearing?
  • CrazyP
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13

Post 3+ Months Ago

rtm223 wrote:
edit: just saw your edit, and I assume the "messing up" is the left and top disappearing?


yep, exactly what I saw. your right its not really worth messing with although it would be nice for it to work
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

CrazyP wrote:
rtm223 wrote:
edit: just saw your edit, and I assume the "messing up" is the left and top disappearing?


yep, exactly what I saw. your right its not really worth messing with although it would be nice for it to work


Yeah, try setting the min-height and min width on the body, should work in moz, FF, NSN, and opera. You could do some javascript event handlers along the lines of:
Code: [ Select ]
on window resize, get the window size
if (windowWidth < minimumWidth){
  document.body.style.width = minimumWidth;
}else{
  document.body.style.width = "auto";
}
if (windowHeight < minimumHeight){
  document.body.style.height = minimumHeight;
}else{
  document.body.style.height = "auto";
}
  1. on window resize, get the window size
  2. if (windowWidth < minimumWidth){
  3.   document.body.style.width = minimumWidth;
  4. }else{
  5.   document.body.style.width = "auto";
  6. }
  7. if (windowHeight < minimumHeight){
  8.   document.body.style.height = minimumHeight;
  9. }else{
  10.   document.body.style.height = "auto";
  11. }

Sorry for the lazy sloppy pseudocode type thing, I don't know if any of that syntax is right and I don't care enough to check! I;m sure you get the idea though ;) Then your problem audience is people using IE, with small monitors AND no javascript.
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

Yeah and I am going to assume the combination of those 3 you had just mentioned is not a very good target audience so I will be able to live with that. I will have to examine that javascript myself and see if it is right.

Perhaps I might learn something from it. Anyway, thank you so much for those comments rtm and crazyp. I am definately going to have to check that out. I will let you know how it turns out if anyone is interested.

Post Information

  • Total Posts in this topic: 14 posts
  • Users browsing this forum: No registered users and 39 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.