CSS layout

layout test field

by jmchen

HTML

<h1 id="hh"> This is a test </h1>

<p class="centerAlign">
<button id="bttn"> click me </button>
</p>

<div class="centerAlign">
<button id="bttn2"  onclick="alert('hi 22')"> click me22 </button>
</div>

<div id="cnvs" class="centerAlign">
<canvas width=300 height=300 id="cnvs" style="background-color:pink"></canvas>    
</div>

<p align="center"> Put me in center </p>

CSS

#hh {
    text-align: center;
}
#cnvs {
//    position: absolute;
//    top: 35%; left: 30%;
    padding-top: 20px;
}
#bttn {
 //   float: center;
 //   position: absolute;
 //   top: 15%; left: 45%;
}
.centerAlign {
    text-align:center
}

JavaScript

$("#bttn").click(funtion(){
    alert ("hi");
});