CSS で寸法が不明な Div を垂直方向に揃えるにはどうすればよいですか?

寸法が不明な場合の Div の垂直方向の配置

CSS では、div のサイズが不明な場合、div の垂直方向の配置を動的に調整するのが困難になる場合があります。この問題に対処するソリューションは次のとおりです。

CSS ソリューション

この純粋な CSS ソリューションは、行の高さが固定された大きな div 内でvertical-align: middle を採用しています:

<code class="css">#center {
  position: relative;
  display: block;
  top: 50%;
  margin-top: -1000px;
  height: 2000px;
  text-align: center;
  line-height: 2000px;
}
#wrap {
  line-height: 0;
}
#wrap img {
  vertical-align: middle;
}</code>

説明

#center div は親の中心に配置され、top: 50% と高さの半分を占めるように margin-top が調整されます。行の高さが非常に大きいため、その中のテキスト コンテンツ (この場合は子 div #wrap) が下部に残ることが保証されます。

#center 内には、#wrap にvertical-align: middle, の画像が含まれています。これにより、画像のサイズに関係なく垂直方向の配置が確保されます。

注意

注意があるブラウザは IE7 のみです。そのためには、内側の div #wrap と画像が同じ行になければなりません:

<code class="html"><span id="center">
  <span id="wrap"><img src="..." alt="" /></span>
</span></code>

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