简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

DIV_html/css_WEB-ITnose で一般的に使用されるセンタリング方法

WBOY
リリース： 2016-06-24 11:44:02
オリジナル
990 人が閲覧しました

1. DIV で一般的に使用されるセンタリング方法:

①相対位置を使用して div マージンを設定し、センタリング効果を実現します (追記: IE ブラウザに効果がない場合は、「text-align:center」を追加します) Body 'This 属性に追加するか、外側に DIV のレイヤーを追加して属性 ''text-align:center'' を設定します)。もちろん、center を記述する別の方法もあります: margin-left:auto;margin-right:auto最も重要なことは div です width 属性を設定する必要があります 

1 <body>2   <div style="width:500px;margin:0 auto">3        .......4   </div>5 </body>
ログイン後にコピー

② left と margin-left の 2 つの属性を使用して、まず div ブロックを margin-left: 50% に設定します (これは、一番左がdiv ブロックの辺が中央にある) の場合、 left 属性値は div ブロックの幅の マイナスの半分であり、

記号は div が幅の半分だけ左に移動することを意味します。追加説明: CSS で直接 left を設定するための前提条件は、親コンテナーの位置を絶対または相対で設定することです。

関連ラベル：
DIV常用的居中方法
ソース：php.cn
前の記事：9種類のWeb Flashフォーカス画像とjQueryフォーカス画像 slideshows_html/css_WEB-ITnose 次の記事：CSS3 グラフィックスとテキストの優れたリストと、mouse_html/css_WEB-ITnose 上にマウスを置いたときの画像のジッター
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ルートにアクセスする前にルート データをプリロードする最良の方法。 特定のルートのページをレンダリングする前に、まず必要なデータを同期的に取得したいと考えています。理想的にはページコンポーネントでデータを取得したいのですが、ルーターファイルでそれを...
から 2023-11-17 14:54:42
0
2
379
モジュールが Vue プロジェクトで定義されていません 公式ドキュメントで指定されているように、npmini tvue@latest を実行して、新しい Vue アプリケーションを作成しました。次に、Vue および Vite Web サ...
から 2023-11-17 12:38:53
0
2
394
変更時に v-for の選択オプション値としてキーを渡す方法 (VueJS) Vue3とBootstrap5を使用しています。複数のオプションがある選択があります。今、option.TEXT を表示しています。何かを変更すると、この値もメソッドに渡されます。...
から 2023-11-17 08:55:24
0
1
276
Guzzle 例外のキャッチ 開発中の API で実行されている一連のテストで例外をキャッチしようとしています。Guzzle を使用して API メソッドを使用しています。テストを try/catch ブロック...
から 2023-11-16 14:36:03
0
12
290
Laravel 9.x: 登録後に成功メッセージを表示するようにユーザーをリダイレクトします ユーザーを登録した後、ログイン ページへのリンクを含む成功メッセージを含むビューを返そうとしていますが、セッション メッセージがビューと一緒に渡されません。これは私の regist...
から 2023-11-12 22:55:21
0
1
336
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！