ホームページ > 記事 > ウェブフロントエンド > CSS で不明な高さの垂直方向のセンタリングを解決_CSS/HTML

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

WBOYオリジナル: 2016-05-16 12:12:031186ブラウズ

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>
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：レイアウトで発生した問題非常に良い洞察_CSS/HTML次の記事：レイアウトで発生した問題非常に良い洞察_CSS/HTML

続きを見る

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

関連記事