[PR] 不動産担保ローン アイコンと文字の高さを揃えたい! | 素人ときどき玄人
<< 「No input file specified. 」ですってぇ〜? | main | 「templateDetails.xml」で設定すること >>
スポンサーサイト

一定期間更新がないため広告を表示しています

カテゴリ:- | | - | - | -
アイコンと文字の高さを揃えたい!
 
JUGEMテーマ:ウェブデザイナー


表題だと分かりにくいのでまずは図を参照してください!




一番上はアイコンが文字より上付きになっています。
これではビジュアル的に美しくないので高さをそろえます。


そろえたものが真ん中の状態。


さらにアイコンがあるなら文字は要らないわっ!
としたものが一番下の状態です。


CSSコード知りたい?


まずはHTMLタグです。

<ul>
    <li><a class="print" href="#">印刷</a></li>
    <li><a class="mail" href="#">メール</a></li>
    <li><a class="comment" href="#">コメントを書く!</a></li>
</ul>


これに対して以下のCSSを書いてください。


li { display:inline; }
ul li a  {
    display: inline-block;
    padding-left: 17px;
    line-height: 12px;
}
ul li a.print  { background:url(print.png) no-repeat; }
ul li a.mail  { background:url(mail.png) no-repeat; }


アイコンの位置は「line-height」君が鍵を握っています。
文字の大きさに合わせて微調整してみてください。


文字が不要の時は上記のCSSに加えて以下を追加してください。

ul li a.print,
ul li a.mail  {
    width:12px;
    height:12px;
    text-indent:-9999px;
}

text-indent」がものすごい数字ですが
これで文字をブラウザーの外にふっ飛ばしている訳です。


どちらの設定も「display: inline-block;」が重要です。
高さと幅の指定をしていても inline-block になっていないと
アイコンが表示されませんのでご注意を!


でもこの子、古いブラウザーでは対応されないので
クロスブラウザあらゆるブラウザで正常に動作し閲覧できることを目指している方は
以下のサイトを参考に対策してくださ〜い。


【参考サイト】
CSS-EBLOG
不特定の数の横に並ぶブロック要素をセンタリングさせる


カテゴリ:css | 18:15 | comments(0) | trackbacks(0) | -
スポンサーサイト
カテゴリ:- | 18:15 | - | - | -
コメント
コメントする









この記事のトラックバックURL
http://befine.jugem.jp/trackback/130