垂直方向のセンタリングを実現する CSS_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

垂直方向のセンタリングを実現する CSS_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

筆記試験や面接で、垂直方向のセンタリングについてたくさん質問されましたが、答えるたびに面接官を満足させることができなかったようで、今日は CSS の垂直方向のセンタリングの問題を整理するのに時間がかかりました。

1. 単一行のテキストの場合。コードを見てください:

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<style>		#wrapper{			width: 500px;			height: 500px;			background: gray;		}		#wrapper p{			line-height: 500px;//行高=父级的height，垂直居中。			text-align: center;//水平居中		}	</style></head><body><div id="wrapper">	<p>这是一段要垂直水平居中的文字！</p></div></body></html>

ログイン後にコピー

効果は次のとおりです:

注: これは単一行のテキストには適していますが、複数行には適していません。

2. 高さが既知のブロックレベル要素の場合、絶対配置を使用できます 。コードを見てください:

rreee

効果は次のとおりです:

適用可能: ページレイアウトに影響がなく、子の高さがわかっている場合、絶対配置を使用できます。

3. 子要素の高さがわかっており、絶対配置をレイアウト に使用できない状況については、次のコードを参照してください。

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<style>		#wrapper{			position: relative;//父级			width: 500px;			height: 500px;			background: gray;		}		#wrapper p{			position: absolute;//子级用绝对定位			top:50%;//先定位到50%的位置			height: 300px;//已知的高度			margin-top: -150px;//往上提本身高度的一半		}	</style></head><body><div id="wrapper">	<p>这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！</p></div></body></html>

ログイン後にコピー

効果は次のとおりです。これは絶対レイアウトに影響します。position:absolute に適用できない要素については、上記の方法を使用できます。そのアイデアは、ブロックレベルの要素を使用し、既知のサイズを設定し、その高さをサイズの半分にすることです。親コンテナに移動し、要素を高さの半分だけ上に中央に移動します。方法2と同じ。

4. 画像 (インライン要素) を垂直方向の中央に配置します。コードを見てください:

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<style>		#wrapper{			background: gray;			width: 500px;			height: 500px;			text-align: center;			overflow: hidden;		}				#null{			width: 100%;			height: 50%;			background: yellow;		}		#content {			height: 100px;			margin: -50px;		}		</style></head><body><div id="wrapper">	<div id="null"></div>	<div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div></div></body></html>

ログイン後にコピー

効果は次のとおりです:

これを見て、慎重な生徒は次のことに気づくでしょう:

空の垂直方向のセンタリングを実現する CSS_html/css_WEB-ITnose ラベルがもう 1 つあります。 , なぜこのようになるのでしょうか? まず、vertical-align 属性の特徴を理解する必要があります。

兄弟行の高さに対して相対的に配置されます。 -height (line-height) 位置決め、

兄弟の行の高さに対して相対的に配置されます(重要なことは3回言います)

、インライン要素にのみ有効なので、後に追加のインライン要素imgを追加します。配置される要素親の行の高さを拡張して中央に配置します。次に、次の画像の空の属性 src="" を忘れずに削除することを強調しなければなりません。そうしないと、空白のボックスが残ります。写真に示すように:

そして、業界には非常に多くの要素があるため、一部の学生は疑問を抱くかもしれません。なぜタグを使用するのでしょうか。 ?

他のインライン要素も使用できます。ここではを使用してみます。

効果は同じです。ここでは使用できません。 -height:100% で行の高さを設定します。詳細については、私の他のブログ「line-height:150% と line-height:1.5 の違い」を参照して、パーセンテージを使用した line-height の特性について学習してください。

適用対象: 一般的なインライン要素。

5. 子レベルと親レベルの両方で高さが不明なブロックレベルの要素は中央に配置されます

。親のオーバーフローが非表示であっても、テキストが増加するにつれて、オーバーフローテキストは非表示にならないため、小さなテキストや静的テキストに適しています。

6. 絶対位置決めとセンタリング方法

、コードを見てください:

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<style>		#wrapper{			width: 800px;			height: 800px;			background: gray;			text-align: center;		}		#wrapper img{			vertical-align: middle;		}					#wrapper #block{			background: blue;			height: 100%;			width: 0;			}	</style></head><body><div id="wrapper">	<img src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">	<img  id="block"></div></body></html>

ログイン後にコピー

効果は写真の通りです:

まず第一に、以下の庭の友人 @profiteeking に感謝します。彼の思い出させるためのコメント。この絶対位置決め方法を試してみましたが、非常にうまくいきました。しかし、原理は何でしょうか？

ここで、まずこの位置決め方法の利点について説明します。中心に配置された要素の幅と高さを無視できるため、絶対的な配置の中心化が実現されます。内部のコードを見てみましょう。

これは何を意味しますか?

実際には、要素の上下左右と親との距離がゼロになるように、幅と高さが不明な要素を作成します。要素の幅と高さが十分でない場合は、マージンを付けます。 auto がそのサイズを埋めるために使用されます。こうしてセンタリングを実現します。

(これは私の大まかな理解です、正確ではないかもしれません!)

記事の説明: さまざまな資料の個人的なレビュー、独自の利益、意見は正確ではない可能性があります、あらゆる種類の専門家からの修正を歓迎します、私は非常に感謝しています。

このウェブサイトの声明

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