HTML・レイアウトの操作：
指定Classを全て同じ高さにして縦位置を中央に
指定したclass値を持つ複数のブロック要素を全て同じ高さにしてから、内部の縦位置を中央合わせにする。
String
対象とするclass値を文字列で指定
Number
上下の最小padding値を数値で指定
Node
指定Node内に絞って検索する id値を文字列で指定してもよい ／ 省略した場合はページ全体を検索する
●必須引数 ●オプション引数(省略可能)
記述例
$arrangeHAlignMid('photo_box', 0, $id('photo_area'))
$arrangeHAlignMid('photo_box', 40, 'photo_area')
$arrangeHAlignMid('photo_box', 40)
注意点
適用すると、指定したclassのCSSで指定した padding-top と padding-bottom と height は上書きされる。
動作サンプル
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 :
$arrangeHAlignMid('box1',30,$id('sample1'));
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。