javascript - Vertically aligning an image with CSS -
i have written little game kid play every time hits key or clicks mouse screen generate random colour , letter , display him. have decided make add animal flash cards well. problem can't seem damned images vertically align in div box that's floating in middle. ideas?
live version minus animals can viewed here if need idea i'm going on - http://64-b.it
<html> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> <script type="text/javascript"> var alphabet = new array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"); function getnum() { return "#" + math.round(math.random() * (16777215 - 0) + 0).tostring(16); } function getletter() { var rannum = math.round(math.random() * (101 - 0) + 0); if(rannum < 61){ return alphabet[rannum]; }else{ return "<img src='images/1.jpg' width='480px' />"; } } function dostuff(){ document.bgcolor=getnum(); document.getelementbyid('middle').innerhtml=getletter(); } $(window).on('click touchstart', function(){ dostuff(); }); $(window).keydown(function(){ dostuff(); }); </script> <body oncontextmenu="return false"> <div id="middle"> </div> </body> </html> and css:
#middle { border-radius: 50px; font-weight: 500; text-align: center; font-family: consolas; font-size: 500px; border: solid 20px black; position: absolute; left: 50%; top: 50%; background-color: #fff; z-index: 100; height: 590px; margin-top: -295px; width: 490px; margin-left: -245px; display: table-cell; vertical-align: middle; }
instead of display:table-cell; , vertical-align:middle; can set line-height equal div's height, center text (single-line) , images vertically
Comments
Post a Comment