左寄せで上下中央に配置してみる
CSSの設定
div要素を上下中央の位置に配置しているのは #mainDiv
.middle_center は更に内部で上下左右中央に配置する
コード.gs
function doGet() { return HtmlService.createHtmlOutputFromFile("index"); } |
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html> <html> <head> <style> #mainDiv { display: table-cell; width: 100vw; height: 100vh; border: solid 1px lightgray; vertical-align: middle; } .middle_center { display: table-cell; width: 120px; height: 120px; border: solid 1px lightgray; vertical-align: middle; text-align: center; } </style> </head> <body> <div id="mainDiv"> <div class="middle_center"> <div>middle center</div> </div> </div> </body> </html> |