18 
<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
 My feed
 </td>

これは次のようになります。


(ソース: garethjmsaunders.co.uk )
私のフィード

アイコンとテキストが縦にずれています。アイコンはテーブル セルの上部にあり、テキストは下部にあります。テキストとアイコンの両方が 16 ピクセルを占めていますが、セルはまだ 19 ピクセルを消費しています。これらの 3 ピクセルを節約するためにそれらを整列するにはどうすればよいですか?

4

10 に答える 10

19

背景画像の方法を選択した場合、それは非常に簡単です。

background: url(feed.png) left center no-repeat
于 2009-01-15T17:14:42.680 に答える
9

画像はテキストのベースラインに合わせています。これには、g や y のような文字の「目盛り」であるディセンダーの高さは含まれません。

行/セルの高さを固定する場合は、line-height を追加して垂直方向の中央に配置できます。たとえば、セルの高さが 16px であると仮定すると、次のようになります。

td.feed {
    line-height:16px;
}

もう 1 つのオプションは、アイコンを背景画像として追加し、セルに padding-left を追加することです。

td.feed {
    background: transparent url(/wp-content/feed-icon-16x16.gif) no-repeat left center;
    padding-left: 18px; /* width of feed icon plus 2px spacing */
}

2番目のものは、テーブルの必要性をまったく取り除くことができることを意味します.今、アイデアがあります...

于 2009-01-15T17:08:36.000 に答える
6

画像はコンテンツの一部であってはならず、単に装飾用であると述べている他の回答は議論の余地があります。alt現在の方法を維持することを選択した場合、スクリーンリーダーが画像を無視できるように、空の属性を画像に追加する必要があると思います。

プロパティはここvertical-alignで使用する必要があるものですが、使用したいのは ですtext-bottom。また、これをリンクにしたいと仮定するので、完全なコード例を次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>garethjmsaunders.co.uk</title>
    <style type="text/css">
    a { text-decoration: none; }
    a img { border: 0; vertical-align: text-bottom; }
    </style>
  </head>
<body>
<table>
<tr>
<td>
  <a href="" title="garethjmsaunders.co.uk rss feed">
    <img alt="" src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif" />
    My feed
  </a>
</td>
</tr>
</table>
</body>
</html>

これでも望ましくない場合は、line-heightやその他の値を試して、vertical-align何が最適かを確認してください。

于 2009-01-15T19:53:39.443 に答える
2

背景画像にして何が悪いの？

.feed {
  background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
  padding-left: 16px;
}
于 2009-01-15T18:45:10.860 に答える
2

これを試して：

<td>
   <img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
   <span class="feedTxt">My feed</span>
 </td>

 .feedTxt { line-height: 20px; } /* Or whatever the height of the image is.  Adjust as needed. */
于 2009-01-15T20:01:50.720 に答える
1

背景画像の方法を試してみましたが、これほど好きではありませんでした...

CSSで...

.iconLabel {
    position: relative;
    top: -6px;
    padding-left: 8px;
}

ページ内...

<td style="text-align:center;">
    <a href="overview.cfm"
        ><img alt="Overview" src="Globe.png" 
        align="middle" border="0" height="60" width="60"
        ><span class="iconLabel">Overview</span
    ></a> 
</td>
  • 「top」属性で遊んで、テキスト/ラベルを上下に移動します。
  • padding属性をいじって、アイコンとテキスト/ラベルの間の水平スペースを変更します。
  • わずかな違いでレンダリングされる可能性があるため、懸念しているブラウザー間で確認する必要があります。
于 2014-10-11T05:39:13.797 に答える
1

IMG タグで「vertical-align: middle」を試すだけで、TD のパディングを設定することもできます

于 2009-01-15T17:03:12.703 に答える
0

position: relative; top: 3px;タグでできます<img>。vertical-align: middle;タグを試すこともできますが<td>、以前にこれに遭遇したと確信しているため、適切に機能するとは思いません. それらを別々<td>のタグに入れることもできますが、それは一種のノーノーです.

于 2009-01-15T16:50:57.923 に答える
0

2 つの要素 (画像とテキスト) をそれぞれ別のテーブル セルに配置します。別のテーブルをネストできます。それは始めるのに良い場所です。次に、パディングなどをいじって調整することができます。

<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
于 2009-01-15T16:54:22.503 に答える