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

Question

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

float: leftを使用

float: leftなし

セルの内容をfloatに垂直に揃えるにはどうすればよいですか？ そしてマークアップはそのように見えます ジェネラコディセタグプレ

Answer 1

これが役立つかどうかはわかりませんが（テーブルベースのレイアウトは残しました）、ストレートのdivを使用して同様の問題を解決するには、line-heightルールを使用して同じことを行うことができます。 ジェネラコディセタグプレ

CSSは、幅や高さなどを設定するために作成されます。これはテーブルには必要ないと思います。「rightCell」の場合、行の高さを行の高さと同じに設定します。 ジェネラコディセタグプレ

次に、テキストは行スペースの垂直方向の中央に配置されます。これは、高さと同じであるため、要素の中央にもあるような印象を与えます。

今言ったように、私はこれをテーブルセルで試したことがありませんが、最近のブラウザでは、次を使用してdisplayプロパティをblockまたはinline-blockに変更できます。 ジェネラコディセタグプレ

必要に応じて他のタイプのブロックを変更します。これにより、セルの表示タイプが一般的なタグコード（またはスパン、またはその他の要素）のように設定されますが、それがテーブルにどのような影響を与えるかはわかりません。

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