JavaScript + Ajax 実践サンプル集 - HTML要素をセンタリングする

HTML要素をセンタリングする

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのcenterプラグインを利用して任意のhtml要素をセンタリングして表示します。サンプルが表示されたら、[Run!]ボタンをクリックしてください。赤のボックスが画面の中央に移動します。

jQuery.fn.center = function () {
  this.css('position', 'absolute');
  this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px');
  this.css('left', ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px');
  return this;
}

<!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>
  <title>jQuery - Center an element on the screen </title>
  <style type="text/css">
    div#box { width: 100px; height: 100px; background-color: Red; color: Yellow; text-align: center; }   
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">

$(function () {

$('#btnRun').click(function () { 
        $('div#box').center();
      });

});
    
    jQuery.fn.center = function () {
      this.css('position', 'absolute');
      this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px');
      this.css('left', ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px');
      return this;
    }  
  </script>
</head>
<body>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

HTML要素をセンタリングする

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

HTML要素をセンタリングする

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!