LANG SELRCT

Apps Script Reference 　（Create：　Create new Spreadsheet　｜　Create new Apps Script）

Saturday, March 10, 2018

div要素の中でセンタリングしたい（垂直水平方向の配置）


div要素の中で子要素をセンタリングしたくていくつか試したので書き残しておきます


display: table-cellを使った垂直水平方向のセンタリング

middle center 

.middle_center {
  display: table-cell;
  width: 120px;
  height: 120px;
  border: solid 1px lightgray;
  vertical-align: middle;
  text-align: center;
}

<div class="middle_center">
  middle center
</div>


上記のセンタリングを実現する過程で試した垂直水平方向の配置
（paddingを使う方法も）
  • display
    • table-cell
  • vertical-align
    • top
    • middle
    • bottom
  • text-align
    • center
    • right
    • left
  • padding


垂直水平方向の配置を設定する



コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
<head>
  <style>
    .middle_center {
      display: table-cell;
      width: 120px;
      height: 120px;
      border: solid 1px lightgray;
      vertical-align: middle;
      text-align: center;
    }
  
    .table {
      display: table-cell;
      width: 120px;
      height: 120px;
      border: solid 1px lightgray;
    }

    .vertical_top {
      vertical-align: top;
    }

    .vertical_middle {
      vertical-align: middle;
    }

    .vertical_bottom {
      vertical-align: bottom;
    }

    .text_center {
      text-align: center;
    }

    .text_right {
      text-align: right;
    }

    .text_left {
      text-align: left;
    }

    .center {
      vertical-align: middle;
      text-align: center;
    }

    .center_padding {
      width: 120px;
      padding: 40px 0;
      border: 1px solid lightgray;
      text-align: center;
    }
  </style>
</head>

<body>
  水平垂直の中央
  <div class="middle_center">
    middle center
  </div>
  <br>

  vertical-align 垂直の位置
  <div class="table vertical_top">
    top
  </div>

  <div class="table vertical_middle">
    middle
  </div>

  <div class="table vertical_bottom">
    bottom
  </div>

  <br>
  text-align 水平の位置
  <div class="table text_center">
    center
  </div>

  <div class="table text_right">
    right
  </div>

  <div class="table text_left">
    left
  </div>

  <br>
  padding 内部の余白
  <div class="center_padding">
    padding center
  </div>
</body>
</html>
意訳
 



middle_centerのスタイル
table-cellで表示する
幅
高さ
枠線
垂直方向の中段に配置
水平方向の中央に配置


tableのスタイル
table-cellで表示する
幅
高さ
枠線


vertical_topのスタイル
垂直方向の上段に配置


vertical_middleのスタイル
垂直方向の中段に配置


vertical_bottomのスタイル
垂直方向の下段に配置


text_centerのスタイル
水平方向の中央に配置


text_rightのスタイル
水平方向の右端に配置


text_leftのスタイル
水平方向の左端に配置


centerのスタイル
セルの中段に配置
水平方向の中央に配置


center_padding
幅
高さ
枠線
水平方向の中央に配置






div要素にtableとvertical_topのスタイルを設定





div要素にtableとvertical_middleのスタイルを設定



div要素にtableとvertical_bottomのスタイルを設定



div要素にtableとtext_centerのスタイルを設定





div要素にtableとtext_rightのスタイルを設定



div要素にtableとtext_leftのスタイルを設定



div要素にtableとcenterのスタイルを設定





div要素にcenter_paddingのスタイルを設定

Posted by
Labels:

Latest post

Google Apps Scriptでスライドのページを指定して複数の図形を追加したい（Google Apps Script）

Googleスライドのページを指定して、　複数の図形（とテキスト）を追加したくて書いたコードです。 Code.gs const values = [ "hello" , "hey" , "hi" ]; con...