HTML・レイアウトの操作：
2つのNodeを中心合わせにする
2つのNodeを指定して、片方を移動することで中央合わせにする。
X座標・Y座標の両方を揃えるか、片方のみを揃えるかを指定可能。
Node1
動かすNodeを指定 id値を文字列で指定してもよい
Node2
配置の基準とするNodeを指定 id値を文字列で指定してもよい
String
X座標・Y座標のうち片方だけを揃える場合に指定 大文字・小文字で指定可能 ／ 省略した場合は両軸を揃える
X = X座標を揃える ・ Y = Y座標を揃える
X = X座標を揃える ・ Y = Y座標を揃える
●必須引数 ●オプション引数(省略可能)
記述例
$centerToCenter($id('circle'), $id('square'))
$centerToCenter('circle', 'square', 'Y')
注意点
$positionInPage()を使用しているので、その仕様に準ずる。
動かすNodeには「position: absolute」を設定するので、事前にCSSで設定しておく方が良い。
動作サンプル
Blue、Red、Goldの円はCSSで事前に「position: absolute」を設定して絶対配置となっている。
Greenの四角形は「position: relative」を指定しているため、この関数を使用することで「position: absolute」に変わり、親Nodeの高さにも影響を及ぼす。
＋
＋
＋
＋
Sass :
#sample_area {
position: relative;
#circle_blue, #circle_red, #circle_gold {
position: absolute;
}
#square_green {
position: relative;
}
}
Javascript :
$centerToCenter($id('circle_blue'),$id('circle_red'));
$centerToCenter('circle_red','circle_gold');
$centerToCenter($id('circle_gold'),$id('circle_blue'),'X');
$centerToCenter('square_green','circle_red','y');
$centerToCenter('square_green','circle_gold','x');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。