中級プログラマの自宅でPHP ブログ

自宅用ポータルシステム「MyHome Portal」をオープンソースで公開。MyHome Portalの説明とエンハンス情報。

aタグを余白含めてクリッカブル+上下中央揃え

<a>タグを余白部分も含めてクリッカブルにするには、

display: block;

を使えば良いが、ブロック内で、上下(縦位置)中央揃えするための

vertical-align: middle;

とは相いれない。

複数行文字列も含めて、ブロック要素内で上下中央揃えをJavaScript/jQueryCSSハックを使わずにIE6も含めてCCSだけで実現する現実的な方法のサンプルです。

方法は、<a>タグに、行数に合わせてpaddingを設定することです。

block-click2.gif

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

もっとシンプルな方法がありましたら、お知らせください。