[解決済み] jQueryを使用してDIVを画面の中央に配置する
2022-03-22 04:11:51
質問
を設定するにはどうしたらいいのでしょうか?
<div>
をjQueryを使って画面中央に配置することはできますか?
解決方法は?
私はjQueryに関数を追加するのが好きなので、この関数は役に立ちます。
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
あとは書くだけです。
$(element).center();
デモの様子 フィドル (パラメータを追加した場合)
関連
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
Vue+ElementUIによる大規模なフォームの処理例
-
jQueryのコピーオブジェクトの説明
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み】position:fixed要素をセンタリングする。