HTML・レイアウトの操作：
指定Classを個別に縦位置を中央に
指定したclass値を持つ複数のブロック要素の内部の縦位置を中央合わせにする。外枠のサイズは変化させない。
String
対象とするclass値を文字列で指定
Node
指定Node内に絞って検索する id値を文字列で指定してもよい ／ 省略した場合はページ全体を検索する
●必須引数 ●オプション引数(省略可能)
記述例
$alignMid('photo_box', $id('photo_area'))
$alignMid('photo_box', 'photo_area')
$alignMid('photo_box')
注意点
ブロック要素に適用する関数。インライン要素には使用できない。
動作サンプル
BOX 1A
BOX 1B
BOX 1B
BOX 1B
BOX 1B
BOX 1B
BOX 1C BOX 1C BOX 1C
BOX 1C BOX 1C
BOX 1C BOX 1C
BOX 1C BOX 1C
BOX 1C BOX 1C
HTML :
<div id="sample1">
<div class="box1" id="box1a">–––</div>
<div class="box1" id="box1b">–––</div>
<div class="box1" id="box1c">–––</div>
</div>
Sass :
#sample1 {
& > div.box1 {
border: 1px solid rgba(#c6dbde,0.3);
&#box1a {
height: 120px;
border-width: 0;
}
&#box1b {
padding: 10px 30px 70px;
border-width: 8px;
}
&#box1c {
width: 380px;
padding: 40px 0 0;
border-width: 16px;
}
}
}
Javascript :
$alignMid('box1',$id('sample1'));
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。