ホームページ  >  記事  >  ウェブフロントエンド  >  DIV+CSSでレイアウトを中央に配置_背景画像を中央に配置_テキストコンテンツを中央に配置_html/css_WEB-ITnose

DIV+CSSでレイアウトを中央に配置_背景画像を中央に配置_テキストコンテンツを中央に配置_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:29:411014ブラウズ

レイアウト内容からページ上の記事テキストの中央揃えまでは非常に重要ですが、CSSで中央揃えを設定するのはとても簡単です。

1. まず、CSS 属性を使用して全体のレイアウトを中央に配置する方法を紹介します。
ここで、オブジェクトの親コンテンツを中央に配置します。ページ全体のコンテンツは と で構成されていると想像できます。次に、近い親に従って、本文の CSS を設定します。センタリングの問題。コンテンツ内で text-aligh: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 auto に設定します。同じ効果は実験には影響しません)。完全な例は次のとおりです (コードをコピーして新しい HTML ファイルを作成し、効果を表示できます):

以下は引用された内容です:



www の CSS div の中央配置の例。 divcss5.com



私はCSSのcenterの完全な中央揃えインスタンスです; 私のレイアウト 外側のレイヤーのエッジは 1px 画像コンテンツは中央に配置されます


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