縦方向の中央に配置する時に今までは「table-cell」を使用していましたけ、もっと簡単な方法を書かれている方がいらっしゃいましたので、今後のために記録しておきます。
DEMO
Sample Text
html
<div class="demo"> <p>Sample Text</p> </div>
css
.demo { position: relative; top: 50%; transform: translateY(-50%); } .demo p { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
「position」は最近まで、あまり好きなれなかったのですが、このような使い方が出来るのなら、今後はもっと積極的に利用していきたいと思います。
コメント