読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

テキストの縦位置・横位置をセンタリングしたいという想い(display: flex; align-items: center; justify-content: center;) 😇

f:id:kimizuka:20170203105616p:plain

いままで、display: table-cell とか text-align: center とか line-height(1行のときのみ)とか色々頑張ってきたけど、今後はflexboxをつかうと決意した。
なんていったって、いままでの試行錯誤と違って専用のプロバティだし。

CSS

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

過去に一度、一部Androidでflexboxが効かず、泣く泣くつくりなおしたトラウマから、flexboxを避けてきたけど、
古いIE、古いAndroidはもう知らん!( http://caniuse.com/#search=flex

と言いたくてしょうがない。まあ、一応ベンダープレフィックスはつけますが。


...


んが。そういうわけにもいかないので、
動作保証端末でこのページ( http://jsrun.it/kimmy/4m5p )を確認してからコーディングに入ろうと思います。


DEMO

プレフィックスなし


-webkit-あり(折り返されることも想定してもろもろ追加設定)