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のスタイルを設定 |
参考
display
https://developer.mozilla.org/ja/docs/Web/CSS/display
vertical-align
https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align
text-align
https://developer.mozilla.org/ja/docs/Web/CSS/text-align
CSS Layout - Horizontal & Vertical Align
https://www.w3schools.com/css/css_align.asp
display
https://developer.mozilla.org/ja/docs/Web/CSS/display
vertical-align
https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align
text-align
https://developer.mozilla.org/ja/docs/Web/CSS/text-align
CSS Layout - Horizontal & Vertical Align
https://www.w3schools.com/css/css_align.asp
