2010-12-06 8 views
1

HTML:テーブルセル内のテキストを左に浮かべた画像に垂直に整列させますか?

<td> 
    <img> 
    text here 
</td> 

CSS:

td img{ 
    display: block; 
    float: left; 
} 

私は絵が細胞内の左側に浮上させることにしたい、とテキストが真ん中に垂直配向させます。画像がなければ、テキストは自動的に真ん中に垂直に配置されますが、そこには画像があるので、テキストの垂直方向の配置を変更することはできません。

アイデア?

+0

テキストを画像の下または右に表示しますか? –

+0

imgの右側に – dmr

答えて

5

画像の高さが分かっている場合は、line-heightプロパティを使用できます。

<td style="line-height: 50px;"> 
    <img>Text text text 
</td> 

これは、テキストが行の高さの中央に表示されるようにする必要があります。

+0

私はこの方法を何度も使ってきました!私はこれを最初に考えてほしかった。 – matthewpavkov

+0

@matthewpavkov - 私はイメージアラインメントに関しては、 'align =" middle "'を使用することがイメージタグでは推奨されなくなったのでよく考えました。 –

+1

これは、テキストが1行にある場合にのみ機能します。 – dmnc

1

imgのCSSにvertical-align:middle;を設定してみてください。また、どのように配置するかに関係なく、ブラウザ間で問題が発生する可能性があるため、その画像をその表のセルの背景として設定することを検討することもできます。

+1

imgの垂直整列を設定しても助けにならなかった... – dmr

+0

@dmrこれが動作するには、 'float:left;'と 'display:block;'を削除する必要があります。 – dmnc

0

行の高さを使用して、テーブルセル内の画像の横にテキストを縦に並べるonl * yは1行のテキストがある場合に機能します。次のテキスト行は、最初のテキスト行の50ピクセル下になります(上記の例のように)。 backgrounとして* 画像を設定 *

* Dあなたがイメージ整列する方の側で画像の幅に=セル内の余白を設定しない限り、また、動作しません。

関連する問題