2016年11月30日 星期三

css文字垂直置中簡易方法

單行文字

.text {
  height: 26px;
  line-height: 26px;
}

多行文字


放置文字的區塊.box
區塊內要置中的內文.text

*{margin:0;padding:0;}

.box{
  height:200px;
  width:300px;
  background:pink;
  margin:30px auto;
  font-size:0;
}
.box:before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
.text{
  display: inline-block;
  font-size:16px;
  vertical-align: middle;
}

css使用flexbox處理垂直居中的版面

2016年11月1日 星期二

利用JavaScript把HTML轉為圖檔

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML to Image html2canvas</title>

</head>
<body>

  <table id="picArea">
    <tr><td>這個table內的內容是要儲存成圖檔案的區塊</td></tr>
  </table>

  <hr />

  <input type="button" value="" />

  <hr />

  <fieldset>
    <legend>圖檔</legend>
    <div>
    </div>
  </fieldset>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js "></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js "></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
  <script>
    $(":button").click(function() {
      html2canvas($("#picArea")[0], {
        onrendered: function(canvas) {
          var $div = $("fieldset div");
          $div.empty();
          $("<img />", { src: canvas.toDataURL("image/png") }).appendTo($div);
        }
      });
    });
  </script>
</body>
</html>