# HubSpot テンプレートのフォームを中央揃えにする

**URL:** <https://community.hubspot.com/t/hubspot/34128>\
**Category:** Tips, Tricks & Best Practices\
**Tags:** professional\
**Created:** [March 18, 2021, 6:25pm UTC](https://community.hubspot.com/t/hubspot/34128 "2021-03-18T18:25:24Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![vrneuman](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vrneuman/32/5740_2.png) [@vrneuman](https://community.hubspot.com/u/vrneuman)\
**Post date:** [March 18, 2021, 6:25pm UTC](https://community.hubspot.com/t/hubspot/34128/1 "2021-03-18T18:25:24Z")

</div>

Horizontal Spacerモジュールまたはカスタム CSS を使用すると、HubSpot テンプレートのフォームを中央揃えできます。

### 

### Horizontal Spacerモジュールを使用する

- HubSpotアカウントにて、［マーケティング］ \> ［ファイルとテンプレート］ \> ［デザインツール］の順に進みます。
- ファインダーで編集する **テンプレート名** をクリックします。
- 右側のインスペクターで、[**+**** 追加**]をクリックして、2 つの新しいHorizontal Spacerモジュールを挿入します。一つをフォームモジュールの左に、一つを右に挿入します。

### カスタム CSS を使用する

- HubSpotアカウントにて、［マーケティング］ \> ［ファイルとテンプレート］ \> ［デザインツール］の順に進みます。
- ファインダーで、フォルダの中から\*\*[CSS ファイル](https://knowledge.hubspot.com/jp/design-manager-user-guide-v2/how-to-create-edit-and-attach-css-files-to-style-your-site)\*\*を探し、クリックして選択します。
- 以下のコードを追加すると、ウェブサイト全体で_すべての_フォームが中央揃えになります。

```lia-code-sample
/* モジュール内のフォームを中央揃えし、幅の最大値を適用する */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/*フォームモジュール内のフォームタイトルを中央揃えする*/
.hs_cos_wrapper.form-title {
text-align: center;
}

/*フォーム送信ボタンを中央揃えする*/
.hs_submit { 
 text-align:enter;
}

```

- 特定のフォームのみを中央揃えしたい場合は、テンプレートの[フォームモジュールにカスタムクラス](https://knowledge.hubspot.com/jp/articles/kcs_article/cos-general/can-i-add-css-ids-to-specific-elements-or-modules-on-my-pages)を追加し、そのクラスのモジュールにのみ適用されるようにCSS を調整します。たとえば、カスタムクラス **center-form** をテンプレートのフォームモジュールに追加すると、CSS は次のようになります。

```lia-code-sample
/* モジュール内のフォームを中央揃えし、幅の最大値を適用する */
form.hs-form,
.center-form .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* フォームモジュール内のフォームタイトルを中央揃えする */
.center-form.hs_cos_wrapper .form-title {
text-align: center;
}

/*フォーム送信ボタンを中央揃えする */
center-form.hs_submit {
 text-align: center;
}

```

- 右上の \*\*[変更を公開]\*\*をクリックします。

_\*本投稿は人間の翻訳者を介さない自動翻訳で提供されております。英語版は[こちら](https://community.hubspot.com/t5/Lead-Capture-Tools/Center-a-form-on-a-HubSpot-template/m-p/420007)からご覧になれます。_