ホームページ > 記事 > ウェブフロントエンド > CSSでdivを垂直方向の中央に設定する方法
CSSでdivを垂直方向の中央に設定する方法
- coldplay.xixiオリジナル
- 2021-04-29 11:09:574445ブラウズ
CSS で div の垂直方向のセンタリングを設定する方法: 1. 実際の高さ height を行の高さ [line-height] と等しくなるように設定します; 2. 上部と下部が一致するようにパディングを設定します。より低いパディング値は同じです。
このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。
CSS で div の垂直方向のセンタリングを設定する方法:
1. 単一行の垂直方向のセンタリング
1 つしかない場合コンテナ内のテキスト行を中央に配置するのは比較的簡単で、実際の高さ height を行の高さ line-height に等しく設定するだけです。
例:
div {
height:25px;
line-height:25px;
overflow:hidden;
}このコードは非常に単純です。overflow:hidden 設定は、コンテンツがコンテナーを超えたり、行が自動的に折り返されたりするのを防ぐために後で使用されます。これにより、垂直方向のセンタリング効果が無効になります。達成される。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 单行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>2. 高さが不明な複数行のテキストの垂直方向の中央揃え
コンテンツの高さが可変の場合は、で説明した方法を使用できます。前のセクション 水平方向のセンタリングを実現するために使用される最後の方法は、上辺と下辺のパディング値が同じになるようにパディングを設定することです。繰り返しますが、これは垂直方向の中央揃えを「見せる」方法であり、テキストを dc6dce4a544fdca2df29d5ac0ea9906b 内に完全に埋める方法にすぎません。次のようなコードを使用できます。
div {
padding:25px;
}このメソッドの利点は、どのブラウザでも実行でき、コードが非常にシンプルであることですが、このメソッドを適用するための前提条件は高さです。コンテナーはスケーラブルである必要があります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><br> <pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！