ホームページ > ウェブフロントエンド > CSSチュートリアル > テーブルのセル内で Div を垂直方向に揃えるにはどうすればよいですか?

テーブルのセル内で Div を垂直方向に揃えるにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-12-07 08:20:14
オリジナル
208 人が閲覧しました

How to Vertically Align a Div within a Table Cell?

を垂直方向に揃える方法 内の要素Cell

HTML コードには、それぞれ

を含む 2 つのセルを含むテーブルがあります。要素。

を配置したいとします。

これを実現するには、次のメソッドを使用できます。

  1. の高さを設定します。要素: 特定の高さを に割り当てます。細胞。これにより、
    の固定参照点が提供されます。要素を使用して高さを計算します。例:
    td {
      height: 200px; /* Replace with the desired height */
    }
    ログイン後にコピー
    にパーセンテージベースの高さを使用します。要素:
    div {
      height: 100%;
    }
    ログイン後にコピー
    絶対的な高さを設定する代わりに、
    にパーセントベースの高さを使用できます。要素。これにより、セル内の利用可能な高さが確実に満たされます。例:
    垂直配置プロパティの追加:
    div {
      vertical-align: middle;
    }
    ログイン後にコピー
    を中央揃えにするにはセル内で要素を垂直方向に配置するには、vertical-align などの CSS プロパティを使用できます。例:

    このアプローチでは、
    を許可する必要があります。 の高さを埋める要素セルの垂直方向の配置も確保します。

以上がテーブルのセル内で Div を垂直方向に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート