Title: Vertical Center
Author: Braad
Published: <strong>2015年4月1日</strong>
Last modified: 2015年12月7日

---

プラグインを検索

![](https://ps.w.org/vertical-center/assets/banner-772x250.png?rev=1125121)

このプラグインは **WordPress の最新3回のメジャーリリースに対してテストされていま
せん**。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress
で使用した場合は互換性の問題が発生する可能性があります。

![](https://ps.w.org/vertical-center/assets/icon-256x256.png?rev=1125121)

# Vertical Center

 作者: [Braad](https://profiles.wordpress.org/braad/)

[ダウンロード](https://downloads.wordpress.org/plugin/vertical-center.1.1.1.zip)

 * [詳細](https://ja.wordpress.org/plugins/vertical-center/#description)
 * [レビュー](https://ja.wordpress.org/plugins/vertical-center/#reviews)
 *  [インストール](https://ja.wordpress.org/plugins/vertical-center/#installation)
 * [開発](https://ja.wordpress.org/plugins/vertical-center/#developers)

 [サポート](https://wordpress.org/support/plugin/vertical-center/)

## 説明

Vertical Center lets you easily vertically center elements.

#### 機能について

 * Center an unlimited number of elements independently
 * Specify simple CSS/jQuery selectors to target elements
 * Easy to use admin interface
 * Items are vertical centered immediately after the page has loaded
 * Adds a class to each centered element after it has been centered (useful for 
   CSS transition effects)
 * Fully responsive (automatically updates on resize and orientationchange events)
 * Works on mobile devices
 * Works across all modern browsers (including IE8)
 * Trigger custom ‘verticalcenter’ event to force a recalculation
 * Debounced resize events for added smoothness

Check out the [Screenshots tab](https://wordpress.org/plugins/vertical-center/screenshots/)
for a gif of the plugin in action.

#### 注意事項

 1. Navigate to **Settings > Vertical Center** in the WordPress admin.
 2. Enter a _selector_ and an _offset_ for the element(s) you want to center.
 3. Add/remove additional elements by clicking the “+ Add More” and “Remove” buttons.

#### 上級

Want to trigger the vertical centering manually? No problem. You can skip entering
a selector on the settings page and call the jQuery script yourself using either`.
initVerticalCenter()` or `.doVerticalCenter()`. The `.initVerticalCenter()` method
sets up the event listeners to recalculate if the window is resized, while the `.
doVerticalCenter()` method directly centers without attaching any events:

    ```
    // Attach events and center.
    jQuery( '.selector' ).initVerticalCenter();

    // Center without attaching events.
    jQuery( '.selector' ).doVerticalCenter();
    ```

Both functions take one optional argument, the offset value (as a number of pixels):

    ```
    jQuery( '.selector' ).initVerticalCenter( offset );

    jQuery( '.selector' ).doVerticalCenter( offset );
    ```

To offset the calculation by 20 pixels:

    ```
    jQuery( '.selector' ).initVerticalCenter( 20 );
    ```

The functions are chainable. My personal favorite way to use this plugin is to inline`
style="opacity: 0;"` on the elements that I am centering (to guarantee they’ll be
transparent when the DOM loads) and then fade them in with something like this:

    ```
    jQuery( '.selector' ).initVerticalCenter().delay( 200 ).fadeTo( 'slow', 1 );
    ```

Or to achieve the same effect with only CSS you can use the `vc-complete` class 
that gets added to each target element after the initial centering (added in version
1.0.3), which might look like this:

    ```
    #target {
        opacity: 0;
        transition: opacity 0.5s;
    }

    #target.vc-complete {
        opacity: 1;
    }
    ```

This plugin also adds an event ‘verticalcenter’ to the window, allowing you to easily
trigger the vertical centering manually. This is useful if you have added items 
to the page after it loads via AJAX. You can trigger the event like this:

    ```
    jQuery( window ).trigger( 'verticalcenter' );
    ```

## スクリーンショット

 * [[
 * The easy-to-use admin interface.
 * [[
 * Vertical centering in action.

## インストール

#### 手動インストール

 1. Upload the entire `/vertical-center` directory to the `/wp-content/plugins/` directory.
 2. Activate Vertical Center through the ‘Plugins’ menu in WordPress.

#### Better Installation

 1. Go to Plugins > Add New in your WordPress admin and search for Vertical Center.
 2. Click Install.

## FAQ

  Is this plugin fully responsive?

Yes! When the script runs it creates event listeners for the window resize and orientationchange
events and recalculates the vertical centering after those events trigger.

  Does the plugin support multiple items that get vertically centered independently?

Yes! From the settings page you can enter as many selectors as you’d like, giving
you the ability to vertically center an unlimited number of items.

  What if I am dynamically adding the element I want to center to the page after
it loads?

The jQuery script uses the selector to always grab the items fresh from the DOM 
in its current state, so as long as the selector matches the newly added element
it will get included in the calculation. You can trigger the vertical centering 
manually at any time (such as after new content has been added via AJAX) by triggering
the ‘verticalcenter’ event on the window like this:

    ```
    jQuery( window ).trigger( 'verticalcenter' );
    ```

## 評価

![](https://secure.gravatar.com/avatar/265aee9d16e025790cd1fb58f2fefb45ec173ab54f04be2da41e2df3f763269c?
s=60&d=retro&r=g)

### 󠀁[Thank you!](https://wordpress.org/support/topic/thank-you-1413/)󠁿

 [engin3x60](https://profiles.wordpress.org/engin3x60/) 2017年8月17日

Works without problems. Easy to use. Saved me like 3 hours of work.

![](https://secure.gravatar.com/avatar/bef42f4e492576aaa7a439420ff1c232a1e2afe0d7793809dee10d727fb9abb2?
s=60&d=retro&r=g)

### 󠀁[Very nice tool](https://wordpress.org/support/topic/very-nice-tool-4/)󠁿

 [Zetona](https://profiles.wordpress.org/zetona/) 2017年1月28日

Thank you for this immense helper.

![](https://secure.gravatar.com/avatar/354067edc6f097d2f751105ff9cf0e1f00fe72ab44041e2f9ec57df390a287a4?
s=60&d=retro&r=g)

### 󠀁[Excellent plugin!](https://wordpress.org/support/topic/excellent-plugin-2075/)󠁿

 [artmaug](https://profiles.wordpress.org/artmaug/) 2016年9月3日

This plugin has been of great help in the development of responsive websites. Easy
to use, it works seamlessly. Many thanks to the developer!

![](https://secure.gravatar.com/avatar/d615026d9c1706a85c2f11bf6c4326cbcde32fa33535f4c617d29767c3755c79?
s=60&d=retro&r=g)

### 󠀁[Great](https://wordpress.org/support/topic/great-4016/)󠁿

 [leftism](https://profiles.wordpress.org/leftism/) 2016年9月3日 1 reply

Just works

 [ 5件のレビューをすべて表示 ](https://wordpress.org/support/plugin/vertical-center/reviews/)

## 貢献者と開発者

Vertical Center はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献
しています。

貢献者

 *   [ Braad ](https://profiles.wordpress.org/braad/)

[“Vertical Center” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/vertical-center)

### 開発に興味がありますか ?

[コードを閲覧](https://plugins.trac.wordpress.org/browser/vertical-center/)するか、
[SVN リポジトリ](https://plugins.svn.wordpress.org/vertical-center/)をチェックする
か、[開発ログ](https://plugins.trac.wordpress.org/log/vertical-center/)を [RSS](https://plugins.trac.wordpress.org/log/vertical-center/?limit=100&mode=stop_on_copy&format=rss)
で購読してみてください。

## 変更履歴

#### 1.1.1

 * Fix JS error when no option has yet been saved

#### 1.1.0

 * Code cleanup and refactoring
 * The plugin class now loads on ‘init’
 * All strings are now translatable
 * Added direct JS method `.doVerticalCenter()`
 * Bugfix: Pass correct plugin version when enqueueing the admin css

#### 1.0.3

 * A class is now added to each target element after it has been initially centered

#### 1.0.2

 * Improve centering calculation when parent elements have padding

#### 1.0.1

 * Added support for using selectors that match multiple items
 * Improved compatibility with other plugins that use JS to affect layout
 * Bugfix: Better scoping of the admin JS to prevent conflicts with other plugins

#### 1.0.0

 * First release

## メタ

 *  バージョン **1.1.1**
 *  最終更新日 **10年前**
 *  有効インストール数 **80+**
 *  WordPress バージョン ** 3.8またはそれ以降 **
 *  検証済み最新バージョン: **4.4.34**
 *  言語
 * [English (US)](https://wordpress.org/plugins/vertical-center/)
 * タグ
 * [center](https://ja.wordpress.org/plugins/tags/center/)[javascript](https://ja.wordpress.org/plugins/tags/javascript/)
   [jquery](https://ja.wordpress.org/plugins/tags/jquery/)[responsive](https://ja.wordpress.org/plugins/tags/responsive/)
   [vertical](https://ja.wordpress.org/plugins/tags/vertical/)
 *  [詳細を表示](https://ja.wordpress.org/plugins/vertical-center/advanced/)

## 評価

 5つ星中5つ星

 *  [  5 5-星レビュー     ](https://wordpress.org/support/plugin/vertical-center/reviews/?filter=5)
 *  [  0 4-星レビュー     ](https://wordpress.org/support/plugin/vertical-center/reviews/?filter=4)
 *  [  0 3-星レビュー     ](https://wordpress.org/support/plugin/vertical-center/reviews/?filter=3)
 *  [  0 2-星レビュー     ](https://wordpress.org/support/plugin/vertical-center/reviews/?filter=2)
 *  [  0 1-星レビュー     ](https://wordpress.org/support/plugin/vertical-center/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/vertical-center/reviews/#new-post)

[すべてのレビューを見る](https://wordpress.org/support/plugin/vertical-center/reviews/)

## 貢献者

 *   [ Braad ](https://profiles.wordpress.org/braad/)

## サポート

意見や質問がありますか ?

 [サポートフォーラムを表示](https://wordpress.org/support/plugin/vertical-center/)

## 寄付

このプラグインが今後も改善できるよう応援しませんか ?

 [ このプラグインに寄付 ](http://braadmartin.com)