しょうもないことがとっても気になる@poyosiです、こんにちは。
以下の画像のように、リストで画像と文字を縦中心に並べるのは1行だけなら簡単なのですが、複数行入るかもしれないとなると急にやっかいになるレイアウトです。
というわけで、どうしてもこのレイアウトを実装したいという超レアなケース向けに、簡単に設置することのできるプラグインを作りました。
こういうのを実装したい
- もじ文字
- もじ文字
もじ文字
「jQuery List Vertical Align」プラグインのダウンロード
プラグインはこちらからダウンロードできます。
jQueryとプラグインを設置しよう
<head>タグの中にjQueryとプラグインを設置しましょう。
画像をCSSの背景で表示させたい場合
画像付きリストを作る場合、背景を<li>タグにbackground設定して表示させる方法があります。
それと同じようにHTMLとCSSを書きます。
HTML
- もじ文字
- もじ文字
CSS
ul {
width: 150px; /* 幅は任意 */
}
ul li {
background: url( "background.png" ) no-repeat left; /* 背景画像を指定します */
padding-left: 60px; /* 背景画像の幅（+間隔をあけたいサイズ）を指定します */
margin-bottom: 20px; /* 次のJavaScript
$(function(){
$('ul li').listvalign({
mode: 'css', // modeを「css」と指定します
bgImgHeight: 40 // 背景画像の高さを指定します
});
});
Sample
- もじ文字
- もじ文字
もじ文字
画像をimgタグで配置して表示させたい場合
画像をCSSの背景ではなく<img>タグで表示させたい場合もあります。
そんな時はこちらです。
HTML
もじ文字- もじ文字
CSS
ul {
width: 150px; /* 幅は任意 */
}
ul li {
margin-bottom: 20px; /* 次のJavaScript
$(function(){
$('ul li').listvalign({
mode: 'tag' // modeを「tag」と指定します
});
// $('ul li').listvalign(); //空でもOK
});
Sample
もじ文字- もじ文字
もじ文字
最後に
このプラグインはあまり需要はないと思いますが、自分が困ったことは他の人も困ることがあるはず…！そういう謎なことをアウトプットすることってすごい大事かなーって思います！
リストに絞ってますが、ブロック要素であればなんのタグでも使えます。商用利用・個人利用ご自由にお使いください。
これ、JavaScript使わなくてもCSSで簡単にできんじゃん？というのがあれば是非教えてください…！table-cellだとIE対応出来ないとおもったら、世の中便利なー。Hackで対応できそう…！公開5分で不要になったプラグイン(; ՞ٹ ՞;)☝
最近のブラウザならtable-cellを使って、CSSのみで簡単ですが、IE6、7だとやっぱり面倒でした。
おまけ：JavaScriptを使わずCSSのみで表示させたい
<div>や<p>などのブロック要素でや連続しない<li>であればtable-cellで可能です。
対応ブラウザ：Firefox 3.5+（3.5はバグあるらしい）、Google Chrome、Safari、IE8
HTML
- もじ文字
CSS
ul {
width: 150px; /* 幅は任意 */
}
ul li {
background: url( "background.png" ) no-repeat; /* 背景画像を指定します */
display: table-cell; /* table-cellを指定することによりvertical-alignが有効になります */
vertical-align: middle; /* 縦中心のmiddleを選択します */
height: 40px; /* 背景画像と同じ高さを入れます */
padding-left: 60px; /* 背景画像の幅（+間隔をあけたいサイズ）を指定します */
margin-bottom: 20px; /* 次のSample
- もじ文字
連続するとこうなるSample（table-cellなので当然tableぽくなる）
- もじ文字
- もじ文字
- もじ文字
こうなってくると面倒だ！という人はプラグインでリストを簡単に導入してみましょう。
One thought on “リストで画像と文字を縦中心に表示するjQueryプラグイン「jQuery List Vertical Align」”