ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでdivを垂直方向の中央に設定する方法

CSSでdivを垂直方向の中央に設定する方法

coldplay.xixi
coldplay.xixiオリジナル
2021-04-29 11:09:574434ブラウズ

CSS で div の垂直方向のセンタリングを設定する方法: 1. 実際の高さ height を行の高さ [line-height] と等しくなるように設定します; 2. 上部と下部が一致するようにパディングを設定します。より低いパディング値は同じです。

CSSでdivを垂直方向の中央に設定する方法

このチュートリアルの動作環境: 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">现在我们要使这段文字垂直居中显示!
    

  

推奨される関連チュートリアル: CSS ビデオ チュートリアル

以上がCSSでdivを垂直方向の中央に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

関連記事

続きを見る