ホームページ > 記事 > ウェブフロントエンド > レイアウトを中央に配置_背景画像を中央に配置_DIV+CSS のテキスト コンテンツを中央に配置
レイアウトを中央に配置_背景画像を中央に配置_DIV+CSS のテキスト コンテンツを中央に配置
- 高洛峰オリジナル
- 2016-12-12 14:39:181816ブラウズ
1. まず、CSS 属性を使用して全体のレイアウトを中央に配置する方法を紹介します。
ここで、オブジェクトの親コンテンツを中央に配置します。ページ全体のコンテンツは 100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e と 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956 で構成されていると想像できます。次に、近い親に従って、本文の CSS を設定します。センタリングの問題。 text-align:center; を使用してコンテンツをセンタリングできます。具体的な CSS センタリング コードは次のとおりです。ただし、レイアウトの幅を設定していないため、これでも問題が発生します。 width"。コンテンツ レイアウトの最も外側の CSS コントロールに float: 属性を設定すると、レイアウトは設定した float: 方向に傾きます。解決策は、本文の中央揃えの CSS 属性を設定することに加えて、レイアウト オブジェクトを設定する必要があります。中央に設定し、幅を定義します。Web ページの幅が 700px で、最も外側の CSS スタイルが class="weicheng" の場合、設定は ".weicheng{margin:0" のようにする必要があります。 auto; width:700px;}" この要素は IE で便利です。テスト後、Firefox などのブラウザでは、親 (body) に加えて text-aligh:center; を設定するだけではレイアウトを中央に配置できません。オブジェクトに "margin:" を設定します。 0 auto; "これはどういう意味ですか? これは、コンテンツの上部と下部の距離が 0 で、左側と右側が自動的に「自動」になることを意味します。中央に配置するように設定できます (ここではマージンを 5px 自動に設定します。同じ効果は実験には影響しません)。完全な例は次のとおりです (コードをコピーして新しい HTML ファイルを作成し、効果を確認できます):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.divcss5.com的CSS div的布局居中实例</title>
<style type="text/css">
<!--
body{ text-align:center; }
.waicheng {color: #0066CC; margin:5px auto; width:700px;
height:200px; border:1px solid #000000;}
-->
</style>
</head>
<body>
<div class="waicheng">我是css中的居中的实验;我的布局外层有一个边为1px黑色边，
我宽700px，高为200px,设置了与顶部内容距离为5PX</div>
</body>
</html> CSS レイアウトを中央に配置したブラウジングの例 2. Web ページの背景を中央に配置するための CSS 属性の使用を紹介します: ここでの中央揃えには、左右の中央揃えと上下の中央揃えが含まれます。中央揃えのコードは次のとおりです。
body{BACKGROUND: #FFF url(http://www.divcss5.com/img/css-logo.gif) no-repeat center;} //この部分は、 css-logo.gif この画像の背景を非リピート (no-repeat) に設定し、中央揃え (センター) にすることを意味します。垂直方向を設定する必要はありません。自動的に中央に配置されます。
左または右に配置する方が簡単であることがわかっています。テキストと画像のコンテンツを中央揃えにします。ただし、高さが 120px の場合、画像は、行の高さのメソッドを設定してテキストのコンテンツを中央揃えにすることによって中央揃えになります。ここでは高さを 120px に設定します。これには line-height:120px を設定する必要があります。このようにして、CSS 属性スタイルを使用してテキストと画像を上下左右の中央に配置できます。
ウェブサイト全体を中央に配置するコードは次のとおりです:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.divcss5.com的CSS div的完整居中实例</title>
<style type="text/css">
<!--
body{ text-align:center; margin:0 auto;
background:url(http://www.divcss5.com/img/css-logo.gif) no-repeat center;}
.waicheng {color: #0066CC; margin:5px auto;
width:700px; height:120px; line-height:120px; border:1px solid #000000; }
.waicheng img {vertical-align:middle;}
-->
</style>
</head>
<body>
<div class="waicheng">我是css中的居中的完整居中实例;
我的布局外层有一个边为1px
<img src="http://www.divcss5.com/img/css-logo.gif" alt="图片内容居中" /></div>
</body>
</html>