ホームページ > 記事 > ウェブフロントエンド > 垂直方向のセンタリングに関する質問_html/css_WEB-ITnose
垂直方向のセンタリングに関する質問_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:101051ブラウズ
センタリングは垂直センタリングと水平センタリングに分けられます。水平センタリングは比較的簡単なので、ここでは詳しく説明しません。
1. 単一行センタリング
1.これもシンプルで簡単です。 line-height はコンテナの高さです。2. 複数行のセンタリング
上記の単一行のセンタリングと似ていますが、line-height の値が変更され、その結果が行数で除算されます。行の高さ。
3. DIV は垂直方向の中央に配置されます。これも 2 つの状況に分けられます
3.1. DIV が高さを知っている場合、ここでの位置決めを使用する必要があります。 以下は具体的なコードです。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; } div{ width: 100%; height: 400px; position: absolute; top: 50%; left: 0; margin-top: -200px; background: red; } .box{ width: 100%; height: 380px; margin-top: -180px; background: black; } </style></head><body> <div> <div class="box"></div> </div></body></html> しかし、これを行うと、ブラウザの高さが一定のサイズまで縮小されると、DIV の一部が見えなくなり、スクロール バーが上にスライドできなくなります。この問題に対する具体的な解決策はまだ見つかりません。解決方法を知っている人がいたら、コメントで教えてください。ありがとうございます。
3.2. DIV が高さを知らない場合の具体的なコードは次のとおりです
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; padding: 0; } html,body{ width:100%; height:100%; } .main{ text-align:center; width:100%; height:100%; display:table; } .box{ display:table-cell; vertical-align:middle; } </style> <!--[if lte ie 7]> <style> .main{ position:absolute; top:50%; height:auto; } .box{ position:relative; top:-50%; } </style> <![endif]--></head><body> <div class="main"> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid harum cupiditate mollitia placeat quam repellendus, expedita magni vitae officiis eaque dolor quis architecto illum, iure atque cum. Iusto, enim, animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem neque optio suscipit minus maiores id magnam porro, harum maxime! Maiores eum tempore quod quas rem, totam, vitae incidunt sed! </div> </div></body></html> さて、これらは私が遭遇した垂直方向のセンタリングに関する問題のほぼすべてです。後で。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。