Div の垂直方向のセンタリング効果を実現する方法-HTMLの知識-php.cn

Div の垂直方向のセンタリング効果を実現する方法

藏色散人

リリース： 2018-11-09 15:52:23

オリジナル

10490 人が閲覧しました

この記事では、主に div の垂直方向のセンタリングを実現する方法を紹介します。

Web デザインにおける div のさまざまな中央レイアウトは、HTML/CSS 初心者が習得する必要がある最も基本的な知識とスキルです。

div水平センタリング効果以前の記事でも紹介しましたが、初心者の友人はすでにマスターしていると思います。

ここからは引き続き簡単な例を使って、

div content を縦方向に中央揃えにする実装方法を紹介していきます。

推奨される参考学習: "

html チュートリアル "

div 垂直中央揃えコード例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Div垂直居中</title>
</head>
<body>
<div style="line-height: 500px;height: 500px;width: 500px;  background: red;">
    PHP中文网
</div>
</body>
</html>

ログイン後にコピー

フロントデスクの効果は次のとおりです。

Div の垂直方向のセンタリング効果を実現する方法

図に示すように、div 内のテキストは垂直方向の中央に配置されます。主な属性は

line-height です。
line-height このプロパティは、行間の距離を設定します (行の高さは垂直方向です)。

line-height プロパティは、行ボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。

行の高さとフォントサイズの間の計算された差 (CSS では「行間隔」と呼ばれます) は 2 つの半分に分割され、テキストコンテンツの行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはラインボックスです。生の数値はスケーリング係数を指定し、子孫要素は計算された値ではなくこのスケーリング係数を継承します。

高さの設定を 500px から 200px に変更すると、レンダリング効果は次のようになります。

Div の垂直方向のセンタリング効果を実現する方法 ##ここで高さを設定せずに行を設定すると、次のようになります。 -height: 200px;、効果は次のとおりです: