ホームページ > 記事 > 毎日のプログラミング > Div コンテンツのセンタリング効果を実現する方法
Div コンテンツのセンタリング効果を実現する方法
- 藏色散人オリジナル
- 2018-11-09 15:53:147327ブラウズ
この記事では主に 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 内のコンテンツは中央に配置されます。
ここでは、コンテンツが垂直方向に中央揃えになるように
line-height属性を設定し、div コンテンツが垂直方向に中央揃えになるように text-align: center; 属性を設定します。水平方向に中央揃えになっています。 margin: 0 auto; 属性は、div がブラウザ ページの中央に水平に表示されるように設定されます。margin が設定されていない場合は、div の内容を設定する必要はありません。次の図に示すように、引き続き中央に表示されます。
関連属性の概要:
このプロパティは、行間の距離 (行の高さ) を設定します。
text-alignこの属性は要素内のテキストの水平方向の配置を指定します。center はテキストを中央に配置することを意味します。 この記事は
Div コンテンツセンタリング効果の実装方法についてです。非常にシンプルでわかりやすいので、必要な方の参考になれば幸いです。
以上がDiv コンテンツのセンタリング効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。