單行文字
.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月30日 星期三
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>
<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>