web-dev-qa-db-ja.com

TD要素内で画像とテキストを垂直に配置する方法は？

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

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


（ソース： garethjmsaunders.co.uk ）
私のフィード

アイコンとテキストが垂直方向に誤って配置されています。アイコンはテーブルセルの上部にあり、テキストは下部にあります。テキストとアイコンの両方が16ピクセルを占めていますが、セルはまだ19ピクセルを占めています。これらの3ピクセルを保存するためにそれらをどのように整列させることができますか？

htmlalignmenthtml-table
15
Mr. Lame

まあ、あなたが背景画像の方法を選ぶなら、それはとても簡単です：

background: url(feed.png) left center no-repeat
18
Joey

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

行/セルの高さを固定する場合は、行の高さを追加して垂直方向の中央に配置できます。したがって、たとえば、セルの高さが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つ目は、テーブルの必要性をまったくなくすことができることを意味しますが、今ではアイデアがあります...

9
roryf

画像がコンテンツの一部であってはならないと述べている他の回答は、単に議論のための装飾のためのものです。現在の方法を維持することを選択した場合にスクリーンリーダーが画像を無視できるように、空の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の他の値を試して、最適な方法を確認できます。

6
cowgod

背景画像にすることの何が問題になっていますか？

.feed {
  background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
  padding-left: 16px;
}
2
Ms2ger

iMGタグで "vertical-align：middle"を試してください。TDのパディングも設定できます。

1
Joey

これを試して：

<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. */
1
Bryan A

position: relative; top: 3px;の<img> 鬼ごっこ。 vertical-align: middle;の<td>タグですが、これは以前に遭遇したことがあるので、きちんと機能するとは思いません。それらを別々の<td>タグですが、それは一種の禁止事項です。

0
Paolo Bergantino

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

<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
0
alex

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

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属性を使用して、アイコンとテキスト/ラベルの間の水平方向のスペースを変更します。
  • 懸念されるすべてのブラウザで確認する必要があります。わずかな違いでレンダリングされる可能性があるためです。
0
sugardaddy