Div コンテンツのセンタリング効果を実現する方法-HTMLの知識-php.cn

Div コンテンツのセンタリング効果を実現する方法

藏色散人

リリース： 2018-11-09 15:53:14

オリジナル

7320 人が閲覧しました

この記事では主に div コンテンツを中央揃えする つまり、div コンテンツを上下左右に中央寄せするエフェクト方法を紹介します。

一般的な Web サイトのナビゲーションバーなど、div コンテンツを中央に配置する効果については、誰もがよく知っていると思います。そこで前回の記事では、div 水平センタリングと div 垂直センタリングの実装方法を紹介しました。

推奨学習リファレンス: 「HTML チュートリアル」

以下では引き続き、div コンテンツのセンタリング#の効果を実現する方法を紹介します。 ##。

div コンテンツを中央に配置するコード例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Div内容居中</title>
</head>
<body>
<div style="line-height: 200px;margin: 0 auto;text-align: center; width: 200px;  background: red;">
    PHP中文网
</div>
</body>
</html>

ログイン後にコピー

フロントエンド効果は次のとおりです:

Div コンテンツのセンタリング効果を実現する方法
##図に示すように、div 内のコンテンツは中央に配置されます。

ここでは、コンテンツが垂直方向に中央揃えになるように

line-height

属性を設定し、div コンテンツが垂直方向に中央揃えになるように text-align: center; 属性を設定します。水平方向に中央揃えになっています。 margin: 0 auto; 属性は、div がブラウザページの中央に水平に表示されるように設定されます。margin が設定されていない場合は、div の内容を設定する必要はありません。次の図に示すように、引き続き中央に表示されます。

Div コンテンツのセンタリング効果を実現する方法関連属性の概要: