Place element to center in the document.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html>
<html>
<head>
<title>Center</title>
<meta http-equiv="Content-Type" type="text/html; charset=utf-8" />
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
td {
text-align: center;
}
#container {
width: 100%;
height: 100%;
vertical-align: middle;
}
</style>
<script language="javascript">
//this just show MDN logo :)
function detonate() {
document.write(
"<table style='width: 100%; height: 100%; vertical-align: middle;'><tr><td style='text-align: center;'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAABHCAMAAABoMgR/AAAAmVBMVEUAAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAACQgoKthobg39/v7+/2kJIDAAASAgJ4EBKHEhRbDA6VFBekFhlpDhCzGBvBGh3QHCDeHiIgBAUvBgc+CAntICRMCgvAv78TEBChn59xcHAjICBCQED///9SUFCBgIAyMDDQz8+wr69iYGCRj4/5u8VqAAAAD3RSTlMAECAwQFBgcICfr7/P3+8Gi+IRAAAD4klEQVR4XpzV2XbTMBAG4BRKT6DQq1/rvjhJ9wLv/3BIQoodO8Etf26c+HzWaI482bRcXW/fn5vPm5Nc3+JjudteHfHVN3w8d1+6/o7/ys1fXjXXLr07Vvhi6vpbAMSkD4aX+sv+7y5pJuyK3242NwDYGSw9AK+kq8AtvQd+bDZfASxv6ghgCMgJSqoAvuAUwKfNLRDn2PLCtLVO0tok4pdeA7g+wx0lGbCUCMlAwXOZHGl+lYuMMdgihwyYqcAUv851AODlfCWlil/jNiJHuVPLCQCa/WD+xZ1CiexO8hiZLT1+zR+RPbwylzglVfskYzbJeKKkZl6lpCtMTgztCUsuPWpAEy0FSAwulbCQkmPmWBEBxJzriB6bksmABNeE4ovjKs63znEMzUB04HDqqfeQ57ggx8Z5uME3EMHdhLPoQlxyHQB0AqRYf9cycyBQffQi0QV3vDWuc8dhM4ik8JrYH7HkjPTGSVY4gdAIUg+gFjW7w+NDfcSSOx5LAkLZdeEc3tXTr9LQ+O7l6fD7uVbBT3mLKatr3S6DdVpbxwFf+P3D4xueDru3++c9znI6GTwMAKdUZcqTreft4RW7/eHn/dML1Iz3czeM/UUL7W9dQM6v/eMOMHNuW3+P3DStUk8rYr9HSKfcUbTIsfqeyMz01ScAm3GjazLhnQdAC05QQ7iw4yiLbsZ7CHzTrp1AU7eMPrUZabNowdsWWqFiLETiGA9Ql85z4SeNHiZtIIARvN6Nl6aNaa0PyelMADJ/w63g4uKs0zkSAKvTRvbax42sz/lYz42hri04tpG8gyvAuz4u0K56I1a5HPtuShljGMDXuCXjG0PH2jWRyQJkhbswWTGMtUuw+t1c4qTNCvhOLBDmf+Y+niZ03kPMZK/shBssM+di2mmbTuL/tGKvuxGCQBSAe7Hd3mwL5RVAcXYUfP+Hq0d2umZd6K7t+SGC8yUmGJIxzz3P+fj6iUyO+eTTROEdbYn9P66YWQlomBssHRIUAOYhOWa2S57u40ErI0uSbqA0x0g8OV5zYxPfr7hxQ+J9gcMQ2JqbPThYgZsA3glPA9keTkqGAveTbswJJzUzKdF5bkYiv+IEZqWkLXCn2ZQ4YvPcRPcr9+157uV5hkuJO887nrULec4dfIZrDz7aAlcuz+dN66nEKRQ4Phm74o3s+6z2BT6YSEveWxtaB0DCtctzYr3gi0ThYEuOTkoLQc7xXh85teAY0Ek9YFLmnjUtuPYQuNapi3QDXR2clLuJ78zk7RZdo4dNJ30M6nJrRw9T/b1/h3/egN8r0JTq5Upcy78LeYPq8eniVPfCvgGx+Oa8OeepaAAAAABJRU5ErkJggg==' /></td></tr></table>"
);
}
</script>
</head>
<body>
<!-- CONTENT BEGIN -->
<table id='container'>
<tr>
<td>
<input type="button"
style="background-color: #ff0000; color: #fff; width: 200px; height: 230px;"
value="My Big Red Nuclear Button"
onclick="detonate()"
/>
</td>
</tr>
</table>
<!-- END CONTENT -->
</body>
</html>
|
Tags: center
I am having trouble using kimodo.