How to vertical align in HTML



  • OK - my first post here and just needed to pass this one along to make sure I am not crazy. Saw this today as a way to horizontally/vertically align an element in HTML. Check out his source at the bottom. I want to see if anybody can come up with a little easier solution to this. I know I can given my 'many years as a java script developer

    -----------------------------------------------------------

    To center horizontally just use the <center> </center> tags



    to center vertically is a bit trickier you need javascript:

    <script>

    function Maximize(elem){

    var div = document.getElementById(elem);

    var h = window.screen.availHeight - 300;

    //div.style.width = '100%';

    div.style.height = h+'px';

    }

    </script>



    and then call the function using the page onload event


    Source(s):


    Many years as a javascript developer




  • This is probably wrong, but...

    <div valign="center">stuff</div>

    ??



  • Of course you'd put the css in an external file but:

    <div style="position: absolute;top:50%; left: 50%;">
       <div style="position: relative; top: -100px; left: -100px;height: 200px; background-color: red; width: 200px;">
          &nbsp;
       </div>
    </div>

    Seems to do it (no javascript required, I'm pretty sure it degrades pretty well)

    and you can use 'em' or '%'  instead of pixels if you want to behave a bit better.



    • Natural vertical alignment only occurs in TD's
      - Thankfully, any element can be set to display:table-cell, and then vertical-align:middle; Except that won't work in IE6-

      What that javascript above does not variable centering of any kind, I mean, duh, all it does it remove 300 from the windowheight and put that into the div. Gee. Big deal. Given the other sizes of that page (which we don't know) it might turn out centered, but only for that specific instance.

      I once almost came up with a full-center idea in just CSS:

      Two divs, nested. Both have the proper site's fixed width and height.
      The parent will be positioned with positve 50%'s, and the child with negative 50%'s. That'll put the child in the middle at all times.

      It works charmingly!

      But, it will also usually create scrollbars in HTML or BODY (depending on DTD in IE), and you'd have to manually turn those off with overflow:hidden;


      So just doing away with all trickery and magic, I decided that the most reliable/robust way of putting a site in the middle is via a big table container with 1 cell.
       sigh


  • @grassfire said:

    Of course you'd put the css in an external file but:

    <div style="position: absolute;top:50%; left: 50%;">
       <div style="position: relative; top: -100px; left: -100px;height: 200px; background-color: red; width: 200px;">
          &nbsp;
       </div>
    </div>

    Seems to do it (no javascript required, I'm pretty sure it degrades pretty well)

    and you can use 'em' or '%'  instead of pixels if you want to behave a bit better.



    If you use negative margins on the parent, you can do away with the child div. That's the commonly accepted way of that technique.


  • @dhromed said:


    If you use negative margins on the parent, you can do away with the child div. That's the commonly accepted way of that technique.

    Ah - see, that's what I get for just throwing something together without playing a bit more.

    But seriously, speaking of WTF's why would you want to have something appear vertically centered?  With the possible exceptions of loading some kind of window in a div over the top of the page to display a status message, and even then it's messy.

    here's a thought - lets make our sites cope with different browser sizes.



  • <table style='position:absolute; left:0px; top:0px; width:100%; height:100%;'>
    <tr><td valign=center align=center>any content here</td></tr>
    </table>

    /*

    strange thing: both in the source html of this post and in the designer there are two dots between position and absolute, but when displaying on the forum it disappear

    */



  • @qbolec said:

    <table style='position:absolute; left:0px; top:0px; width:100%; height:100%;'>
    <tr><td valign=center align=center>any content here</td></tr>
    </table>

    /*

    strange thing: both in the source html of this post and in the designer there are two dots between position and absolute, but when displaying on the forum it disappear

    */

    Protection against styles that mess up the page. It's unnecessary now, and it was ineffective even when it was necessary.



  • @grassfire said:

    here's a thought - lets make our sites cope with different browser sizes.


    Yes, that's a holy grail type of thing.

    At first, you think you want to emulate, say, PDF-style scaling, so that people with big screens can just fill out the window area with the page and take advantage of their high resolution.

    But two issues arise then:
    - sometimes, even on the big screens, some text is a bit too small for comfort. Zooming in further will create a HSOD (Horizontal Scrollbar Of Death), and that's a big no-no.
    - People on smaller screens may have that HSOD problem perpetually, when reading PDFs

    So that's why sites are hard to scale: you can define the lot in ems, but you'll find your whole site scaling, like PDF, and creating HSODs all over the place (i.e. the bottom).

    That's why Opera's and IE7's zooming suck so much, because it creates HSOD [i]by design[/i]. Firefox text-zooms, and that's much better. But still, I often get too-wide TDWTF pages and get really close to a HSOD appearance.

    So fixed-width sites, optinally with a fixed height, are ok. The thing you must look out for is the site's ability to text-scale nicely. But I do have hopes for full page zoom, because "all" it takes is the ability to stop horizontal scaling as one zooms in further and the page hits the right-side edge.


Log in to reply