Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: how to vertical centered a DIV content??

Bottom of Page

1 to 16 of 16

  1.  
    • CommentAuthorpapachan
    • CommentTimeFeb 28th 2006
     permalink
    Hello there
    dont remember, with XHTML, how to center vertically a global div content in the center of my browser. without using table of course
    can i use margintop with percent?
    •  
      CommentAuthortsk
    • CommentTimeFeb 28th 2006
     permalink
    not sure what you are saying here.

    But if you are reffering to a containing global div you can just style the <body> tag and apply margins to it.

    body {
    width: 800 pixels;
    margin:10px auto;
    }
    • CommentAuthorMouldy
    • CommentTimeFeb 28th 2006
     permalink
    I think you may mean this.

    It's one I used myself recently. If you can find a better method, please post it in this thread.
    • CommentAuthorpapachan
    • CommentTimeFeb 28th 2006
     permalink
    yes mouldy ! cool exemple
    wil try to catch it ! thanks
    •  
      CommentAuthornifkin
    • CommentTimeFeb 28th 2006
     permalink
    there's a built in function for centering objects (vertical and horizontal) in jQuery if you don't mind a spec of JS.
    • CommentAuthorpapachan
    • CommentTimeMar 1st 2006 edited
     permalink
    i have found this working
    #vcenterhack {margin: 0 auto; vertical-align: middle; width: 100%; height: 100%; text-align: center;}
    and use a table in the body
    <table id="vcenterhack"><tr><td></td></table>
    •  
      CommentAuthornifkin
    • CommentTimeMar 1st 2006
     permalink
    Seriously, try it the jquery way.
  8.  permalink
    Hmm, the jquery is purdy nifty.

    One of my sites does some CSS trickery to accomplish some vertical positioning: http://www.sheilaelichacz.com/
    • CommentAuthorMouldy
    • CommentTimeMar 1st 2006
     permalink
    Shaun, the site looks as if it might look great but the menus don't work and are covered up by the main image. I don't see any centering. I am using Opera
    •  
      CommentAuthoranblik
    • CommentTimeMar 2nd 2006
     permalink
    nifkin suggestion is great. But we have disabled JavaScript in our browser for security and jquery isnt work. I am surprised by the way AJAX is being hyped. theres no effect in my mobile browser too, press SHIFT+F11 in opera or google mobile browser
    •  
      CommentAuthorkayloe
    • CommentTimeMar 3rd 2006
     permalink
    This is a great solution Moudly. Once you add a combination of 100% width and 100% height values to the CSS the layout can fit within the whole page and be used for a flexible solution sans-tables!

    This might be old news to some people, but I've just realised the potential of negative margin values for positioning elements. More power from CSS - and accessible, usable websites that are lightweight for my projects. Thanks again guys!
    •  
      CommentAuthorJohnRiv
    • CommentTimeMar 13th 2006
     permalink
    During David Shea's presentation today at SXSW, he presented how to solve this problem using some hacks. Check out the solution at http://www.mezzoblue.com/presentations/2006/sxsw/css/sampler/q2-3.html
  13.  permalink
    Nifkin, you actually bought Simple VIewer Gallery for that site? It looks nice and works wonders, huh?
    •  
      CommentAuthornifkin
    • CommentTimeMar 13th 2006
     permalink
    for which site?
  15.  permalink
    Gah, nevermind. I misread a username *is too tired to post on forums @ 2:45am*
    •  
      CommentAuthorJohnRiv
    • CommentTimeMar 16th 2006
     permalink
    Came across yet another technique today on digg:

    http://www.waxpad.com/articles/waverticalcentering

1 to 16 of 16

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page