前回の記事では、「ページレイアウトで div を水平方向にセンタリングする CSS 方法」を簡単にまとめました。実は、水平方向のセンタリングは比較的簡単ですが、垂直方向のセンタリングはページをデザインするときに行うため、少し面倒です。多くの場合、横幅はすべて固定です。したがって、ページレイアウト時に垂直方向のセンタリングを実現する方法を要約する必要があります。
この問題について話すと、CSS には垂直方向の中央揃えを設定するvertical-align 属性はないのかと疑問に思う人もいるかもしれません。一部のブラウザがサポートしていない場合でも、CSS Hack 技術を少し行うだけで済みます。そこで、ここで少し言っておかなければなりません。確かに CSS にはvertical-align 属性がありますが、それは (X)HTML 要素内の valign 属性を持つ要素 (table 要素の
や < など) にのみ有効です。 ;th>、 など、および 、
などの要素には valign 属性がないため、vertical-align は機能しません。 1. 単一行の垂直方向の中央揃え
view plain copy to Clipboard print ?
div { height:25px; line-height:25px; } div { height:25px; line-height:25px; overflow:hidden; } ログイン後にコピー
ここをクリックして実行効果を確認してください
2. 高さが不明な複数行テキストの垂直方向の中央揃え コンテンツの高さが可変の場合、前のセクションで説明した水平方向の中央揃えを実現するために使用される最後の方法、つまり Padding を設定することができます。上部と下部のパディング値を同じにするだけです。繰り返しますが、これは垂直方向の中央揃えを「見せる」方法であり、テキストを
内に完全に埋める方法にすぎません。次のようなコードを使用できます:
view plain copy to Clipboard print ?
div {padding:25px; }
div { padding:25px; } ログイン後にコピー
このメソッドの利点は、どのブラウザでも実行できることです。非常に単純ですが、この方法を適用するための前提条件は、コンテナーの高さがスケーラブルである必要があることです。
実行中の効果を確認するにはここをクリックしてください
3. 複数行テキストの固定高さ中央揃え
この記事の冒頭で、CSS のvertical-align 属性は次の (X) HTML タグでのみ機能すると述べました。 valign 特性ですが、CSS には
をシミュレートできる表示属性もあるので、この属性を使用して に
をシミュレートしてから、vertical-align を使用できます。 display:table と display:table-cell を使用する場合、前者は親要素に設定する必要があり、後者は子要素に設定する必要があるため、テキストに別の 要素を追加する必要があることに注意してください。配置する必要があります:
E
クリップボードにコピーして印刷しますか? Div#wrap {Height: 400px; Display: Table;} Div#Content {Vertical-Align: MIDDLE; Table-C-C border: 1px Solid #ff0099; background- color:#FFCCFF; width:760px; }
div#wrap { height:400px; display:table; } div#content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; } ログイン後にコピー
実行中の効果を確認するにはここをクリックしてください
この方法は理想的なはずですが、残念ながら Internet Explorer 6 は display:table と display:table- を正しく理解できません。したがって、このメソッドは Internet Explorer 6 以前では無効です。まあ、それは憂鬱です！しかし、私たちには他の選択肢もあります。 4. Internet Explorer での解決策
Internet Explorer 6 以前では、計算上の欠陥が多くあります。 Internet Explorer 6で親要素を配置した後、子要素に対してパーセント計算を行うと計算根拠が引き継がれるようです（位置決め値が絶対値であればそのような問題はありませんが、パーセント計算基準を使用するとこれは要素の高さではなく、親要素から継承された配置の高さになります)。たとえば、次の (X)HTML コード スニペットがあります:
lt;/div>
<div id="wrap"> <div id="subwrap"> <div id="content"> </div> </div></div> ログイン後にコピー
如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对 content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为 40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我 们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这 中方法来实现Internet Explorer 6中的垂直居中：
view plain copy to clipboard print ?
div#wrap { border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; position:relative; } div#subwrap { position:absolute; border:1px solid #000; top:50%; } div#content { border:1px solid #000; position:relative; top:-50%; }
div#wrap { border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; position:relative; } div#subwrap { position:absolute; border:1px solid #000; top:50%; } div#content { border:1px solid #000; position:relative; top:-50%; } ログイン後にコピー
当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）
五、完美的解决方案
view plain copy to clipboard print ?
div#wrap { display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden; } div#subwrap { vertical-align:middle; display:table-cell; _position:absolute; _top:50%; } div#content { _position:relative; _top:-50%; }
div#wrap { display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden; } div#subwrap { vertical-align:middle; display:table-cell; _position:absolute; _top:50%; } div#content { _position:relative; _top:-50%; } ログイン後にコピー
至此，一个完美的居中方案就产生了。
点击此处查看最终运行效果
p.s. 垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。
参考文章：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
See all articles
