i just went through this myself. that will center the content horizontally, but ...

jjs · on March 22, 2010

Here you go. Should work in all browsers except IE7 and earlier.

You can add as many column divs as you like.

Note that the html { height:100% } is needed when in HTML5 mode.

  <!DOCTYPE HTML>
  <html>
    <head>
      <style type="text/css">
        html, body { height:100%; margin: 0 auto; }
        body { display: table; vertical-align: middle; }
        .column { display:table-cell; vertical-align: middle; }
        p { text-align: center; }
      </style>
    </head>
    <body>
      <div class="column">
        <p>holy cow!</p>
        <img alt="shock the monkey" src="http://i.imgur.com/Pt9Pd.jpg" />
        <p>it worked!</p>
      </div>
    </body>
  </html>

allenbrunson · on March 22, 2010

holy crap. that's pretty good, man! when i was trying to get this to work a couple of nights ago, i would have gladly given you a hundred bucks for that code snippet, just to make the pain go away.

i was afraid that your method would screw up <ul> lists the way most of my attempts did, where the bullets would wind up stuck to the left margin while the text strings are goofily centered in the middle, but no, your way presents lists properly as well.

your code snippet is going into production for my iphone card game, to replace this awful hacked-together menu i made:

http://www.platinumball.net/hearts/png/orig_help_large.png

thanks!

jjs · on March 22, 2010

Glad you like it. :)

when i was trying to get this to work a couple of nights ago, i would have gladly given you a hundred bucks for that code snippet, just to make the pain go away.

If you like, feel free to give a shout-out to @jjs in your game's credits. :)