今日のハマりどころ
div要素を中央寄せしようとしてcalc()
を使ってやりました
before.css
.example{
width:300px;
height:100px;
top:100px;
left:calc(50%-300px/2);
}
と書いたら全く反映されなかった。
Developer Toolで確認したらこのleft
がInvalid Valueになってた
解決法
ピンとくるまで時間がかかりました。
after.css
.example{
width:300px;
height:100px;
top:100px;
left:calc(50% - 300px / 2); /*値と演算子の間にスペースが必要*/
}
はい、演算子との間にはスペースが要るんです。
他ファンクションでどうなるかは不明。
=====
#【追記】2015-04-08
だいぶ前の記事ですが割と見て頂いてびっくりです。
Twitterで言及されていたのですが、
+
, -
には スペースが必要 で、*
,/
には スペースが不要 なのだそうです。
参考:
Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces.
しかしややこしいのでのですべての演算子でスペース入れるようにしてます。