aタグを余白含めてクリッカブル+上下中央揃え
<a>タグを余白部分も含めてクリッカブルにするには、
display: block;
を使えば良いが、ブロック内で、上下(縦位置)中央揃えするための
vertical-align: middle;
とは相いれない。
複数行文字列も含めて、ブロック要素内で上下中央揃えをJavaScript/jQueryやCSSハックを使わずにIE6も含めてCCSだけで実現する現実的な方法のサンプルです。
方法は、<a>タグに、行数に合わせてpaddingを設定することです。
a {display: block;
line-height: 16px;
...
}
.line1 a { padding: 40px 0; }
.line2 a { padding: 32px 0; }
.line3 a { padding: 24px 0; }
サンプル↓
http://2ndmytest.appspot.com/sample/block-click.html
スニペット集にも載せました。
http://memo.ok2nd.biz/?query=display%3A+block
もっとシンプルな方法がありましたら、お知らせください。