CSS で不明な高さの垂直方向のセンタリングを解決_CSS/HTML

CSS の垂直位置合わせ機能はありますが、高さが不明な垂直中央揃えの問題 (DIV タグに高さ不明のテキストまたは画像がある場合) を効果的に解決することはできません。

Mozilla、Opera、Safari などの標準ブラウザの場合、親要素の表示モードを TABLE (display: table;) に設定し、内部の子要素を table-cell (display: table;) に設定できます。 table-cell )、vertical-align 機能を使用して垂直方向の中央に配置しますが、非標準のブラウザーはこれをサポートしていません。

非標準ブラウザでは、子要素を上から 50% に設定し、内部に要素を追加して上から -50% オフセットすることしかできません。

コードをコピーします コードは次のとおりです。

body {padding: 0; margin: 0 ;}
body,html{高さ: 100%;}
#outer {高さ: 100%; オーバーフロー: 非表示; 位置: 相対; 幅: 100%; }
#outer[ id] { 表示: テーブル; 位置: 静的;}
#middle {位置: 絶対; トップ: 50%;} /* エクスプローラーのみ*/
#middle[id] {表示: テーブルセル;垂直整列 : 中央; 位置: 静的;}
#inner {位置: 相対; トップ: -50%; 幅: 400px; マージン: 0 auto;} /* エクスプローラーのみ */
div.greenBorder {border: 1px 単色の緑色; 背景色: アイボリー;}

xhtml

コードをコピーします コードは次のとおりです。

id="inner" class "greenBorder"> CSS2 セレクター #value[id] は IE ではサポートされていません。

CSS2 セレクター #value[id] はセレクター #value と同等ですが、Internet Explorer はこのタイプのセレクターをサポートしていません。同様に、.value[class] は、標準ブラウザでのみ読み取ることができる .value と同等です。

テスト: Firefox1.5、Opera9.0、IE6.0、IE5.0 に合格しました。

有効な CSS での垂直方向の中央揃え

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style type="text/css"> body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;} body,html{height: 100%; } a{color: #333;} a:hover{color: green;} #outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; } #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/ #middle[id] {display: table-cell; vertical-align: middle; position: static;} #inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */ div.greenBorder {border: 1px solid green; background-color: #FFF;} p{margin: 1em;} </style>デフォルトの長さ <div id="outer">長いページ<div id="middle"> <div id="inner" class="greenBorder"> <p> 1. Illustrator を開き、新しいファイルを作成し、インポートする画像よりも大きい四角形を描画し、白で塗りつぶします。 2. 長方形を選択し、メニュー: 効果 > 歪みと変形 > ジグザグを以下のように設定します。 3. メニュー: エフェクト > スタイライズ > ドロップ シャドウを以下のように設定します。 1. Illustrator を開き、新しいファイルを作成し、インポートする画像よりも大きい長方形を描画し、白で塗りつぶします。 2. 長方形を選択し、メニュー: 効果 > 歪みと変形 > ジグザグを以下のように設定します。 3. メニュー: エフェクト > スタイライズ > ドロップ シャドウを以下のように設定します。 <a href="javascript:toggleContent('inner',1)"> </a> <a href="javascript:toggleContent('inner',2)">Forestgan</a> によって設計されました このデモは、</p>クリエイティブ コモンズ ライセンス<p> -- 表示および非営利使用に基づいてライセンスされています。 </p> <address style="text-align:center; padding: .5em; clear: left;"> <a href="http://www.forest53.com"> </a> <br><input onclick="runEx('runcode63300')" type="button" value="运行代码"> <input onclick="doCopy('runcode63300')" type="button" value="复制代码"> <input onclick="doSave(runcode63300)" type="button" value="保存代码">[Ctrl+A ですべて選択 注: <a href="/article/23421.htm" title="查看具体详情" target="_blank">外部 Js を導入する必要がある場合は、</a> を実行するために更新する必要があります]</address> </div> <br> </div> </div>