CSSでdivを垂直方向の中央に設定する方法
css
垂直方向に中央揃え
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. 高さが不明な複数行のテキストの垂直方向の中央揃え
コンテンツの高さが可変の場合は、で説明した方法を使用できます。前のセクション 水平方向のセンタリングを実現するために使用される最後の方法は、上辺と下辺のパディング値が同じになるようにパディングを設定することです。繰り返しますが、これは垂直方向の中央揃えを「見せる」方法であり、テキストを
内に完全に埋める方法にすぎません。次のようなコードを使用できます。
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">现在我们要使这段文字垂直居中显示！