テーブルセルの垂直配置の問題

Question

テーブルのセルの1つにfloatを設定しました。しかし今、私はそれの内容の垂直方向の配置を変更することはできません。デフォルトでは、コンテンツはdivの上部に移動します。私はvalign: middle、vertical-align: middleを成功させました。ここでの結果は以下のとおりです。

float: left

でfloat: left私はフロートと垂直方向にセルの内容を揃えることができますどのように

がなければ？ とマークアップ、これは（私は今の背後にある表ベースのレイアウトを残してきた）のに役立ちますが、あなたが使用して同じことを行うことができますストレートdiv Sを使用して、同様の問題を解決する場合、私は知らないこと

<td id="top_logo"> 
    <a href="index.php"> 
     <img src="core/design/img/logo.png" style="height:40px; padding:3px;"/> 
    </a> 
</td> 
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td> 

Answer 1

のように見えますline-heightルール

<div id="tableRow"> 
    <div id="leftCell"><img src="mylogo" /></div> 
    <div id="middleCell">&nbsp;</div> 
    <div id="rightCell">User Name Here</div> 
</div> 

あなたのCSSは、私はあなたがテーブルのために必要ではないだろうと思うの幅/高さなどを設定するために作成されるだろう、とあなたの「rightCell」のために、あなたはと同じになるように行の高さを設定したいです行の高さは：

#rightCell 
{ 
    height: 30px; 
    line-height: 30px; 
} 

何が起こるか、その後、テキストはそれが高さと同じですので、行間に垂直方向に中央揃えされている、それはあまりにも要素の中心にいた印象を与えます。私が言うように

は今、私はテーブルのセル上でこれを試したことがありません、しかし、現代の任意のブラウザでは、使用してblockまたはinline-blockを言うための表示プロパティを変更させてください：

すべてのブロックを変更する

display: block; 

必要に応じて他のタイプのこれにより、セルの表示タイプがdiv（またはスパン、またはその他の要素）のように設定されますが、テーブルにどのような効果があるかはわかりません。

また、古いブラウザには対応していないことに注意してください。ここではIE6のように、この機能を全面的に使用するには、サポートが必要な場合に古いブラウザでいくつかのハックを行う必要があります。