3 ms·
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 wh
by jjs 17y ago
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 17y agoholy 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 http://www.platinumball.net/hearts/png/orig_help_large.png thanks!
- jjs 17y agoGlad 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. :)