2

表のセルに画像の後にテキストを配置すると、テキストの垂直方向の配置が、隣接するセルのテキストに比べて下にずれます。CSSプロパティを使ってみたline-heightのですが、効果がないようです。

次の例では、「123 説明」を「セル 1」と同じにする必要があります。また、デフォルトでは画像と「123」の間にスペースがあります。どうすればそれを調整できますか-おそらく負のマージンですか？

<html>
<head>
    <style type="text/css">
        table { border-collapse: collapse; }
        td { border: thin solid; width: 10em;}
        /* .adjust-text { line-height: 1.3em; } */
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>cell one</td>
                <td>
                   <img src="small-star.png" />
                   <span class="adjust-text">123 Description</span>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
4

4 に答える 4

5

デフォルトでは、画像はテキストのベースラインに合わせて配置されます。これにより、セル内のテキストが実際に押し下げられます。これに対処するには、次を指定します。

td img { vertical-align: top; }

CSS vertical-align hereの優れた要約があります。

スペースを削除するには... スペースを削除します:

<img src="http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png" /><span class="adjust-text">123 Description</span>

http://jsfiddle.net/s38Uv/

于 2010-06-09T17:51:22.270 に答える
0

画像をセルに揃えるには、CSS ルールに画像を背景画像として配置してみてください。次に、background-position を使用して背景の y 位置を調整します。要素の左側にパディングを追加して、画像の右側にテキストを表示します。


        table { border-collapse: collapse; }
        td { border: thin solid; width: 10em;}
        .image {
            background-image:url('http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png');
            background-position: 0 -2px;
            padding-left:20px;
        }


<span class="image">123 Description</span>
于 2010-06-09T17:55:31.303 に答える
0 
<html>
<head>
<style type="text/css">
    table { border-collapse: collapse; }
    td { border: thin solid; width: 10em;}
    td { vertical-align: baseline;}
    td img { vertical-align:  middle;}
</style>
</head>
<body>
<table>
    <tbody>
        <tr>
            <td>cell one</td>
            <td>
               <img src="small-star.png" />
               <span style="margin: 0 0 0 -5;">123 Description</span>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>
于 2010-06-09T18:10:45.663 に答える
-1

あなたは古典を試しましたvertical-align:middleか？それ以外の場合は、画像を独自のセルに配置するか、配置をデフォルトのままにして、すべてのセルのパディング下部を変更しても同じ結果が得られます。

于 2010-06-09T17:51:08.057 に答える