[JS]スタイルシート初心者にも優しい!要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js

デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量(1KB)のスクリプトを紹介します。
作業は、HTMLに2つ追加するだけです。

サイトのキャプチャ

Midway.js

Midway.jsのデモ

天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。
デモは、ブルーの矩形の中に、ホワイトの要素を天地左右中央配置にしています。

まずは、デスクトップサイズから。

デモのキャプチャ

デモページ:幅1200pxで表示

タブレットの780pxにサイズを変更しても、天地左右中央配置です。

サイトのキャプチャ

デモページ:幅780pxで表示

IEでもOK。

デモのキャプチャ

デモページ:IE7モードで表示

Midway.jsの使い方

使い方は簡単で、ステップは2つです。

Step 1: 外部ファイル

head内に、スクリプトを外部ファイルとして記述します。

<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="midway.min.js"></script>
</head>

Step 2: HTML

天地左右中央配置にする要素のclassに「centerHorizontal centerVertical」を加えます。
デモでは、ブルー矩形(#parent)があり、その中のdiv要素にclassを加えています。

<div id="parent">
	<div class="centerHorizontal centerVertical" id="child"></div>
</div>

参考:CSS

スタイルシートの元となっているのは、下記の記事です。

スタイルシートはこんな感じです。

#outer{
  position: relative;
  width: 40%;
  height: 120px;
  margin: 20px auto;
  border: 2px solid #c00;
}
#inner{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;
  left: 50%;
  margin-left: -50px;
  background-color: #00c;
}

top of page

©2017 coliss