フッターの文字を上下左右ともにセンタリングしたときの覚書
左右のセンタリングだけだと、footer にtext-align を指定するだけで簡単だった。上下のセンタリングだけも display: table-cell が有効だった。しかし、footer の width が 100% では、margin:0 auto が効かず、text-align と vertical-align の両立にてこずった…。
css
——————————————–
#footer {
text-align:center; /* footer 内の div を左右中央にする */
border-top: 1px solid #009933;
background: #fff;
width:100%;
height: 30px;
box-sizing: border-box; /* パディングとボーダーを幅と高さに含める */
clear: both; /* ２カラム解除 */
}
#footer > div {
/* text-align:center を有効にするため inline 化 */
display: inline-block;
background: #999; /* 幅を視覚化するために色をつけている */
}
/* 上下のセンタリング */
#footerText {
height: 30px; /* footer と同じ高さを指定 */
display: table-cell;
vertical-align: middle;
}
——————————————–
html
——————————————–
<div id=”footer”>
<div>
<div id=”footerText”>フッターの文字</div>
</div>
</div>
——————————————–
