Welcome, guest | Sign In | My Account | Store | Cart

Place element to center in the document.

HTML, 48 lines
 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>

1 comment

D Floy 8 years, 4 months ago  # | flag

I am having trouble using kimodo.

Created by greg zakharov on Sun, 14 Jul 2013 (MIT)
HTML recipes (12)
greg zakharov's recipes (59)

Required Modules

  • (none specified)

Other Information and Tasks