DIVにはtext-valignは使えないので
text-valignはテーブル要素に対して使うプロパティで、ボックス要素には使えません。テキストリンクで背景に画像を流し込んでボタン風に見せたいときに上下位置を中央に配置しようとする時に、text-valignでは駄目だし、vertical-alignでも駄目みたい。というわけでこういう解決方法があります。
<style type="text/css">
<!–
.icon {
font-size: 10pt;
line-height: 50px;
background-color: #666666;
height: 50px;
}
–>
</style>
</head>
<body>
<div class="icon">テスト</div>
</body>
文字列の高さを指定するプロパティで、上下位置を垂直中央にしてしまいます。これで1行の文字列なら背景に画像を流し込んで綺麗に見せることができます。IE6、7、Firefox、Safariで動作確認したところ問題ありませんでした。
CSSやXHTMLは結局仕様がまだ固める中途にあるわけで、ブラウザの表示機能に依存したり、本来の使い方じゃない使い方をしなきゃいけなかったりで、やっぱり奥が深いです。
加藤 康祐 / 企画・設計
プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。
是非、フォローしてください！
Twitter / Instagram
『ひとり仕事: フリーランスという働き方』 加藤 康祐
posted with amazlet at 15.09.10
(2012-10-5)
売り上げランキング: 14,705
100円
売り上げランキング: 14,705
100円
Amazon.co.jpで詳細を見る
フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）
フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）
