在HubSpot模板上居中表單

您可以使用水平空格模板或自定義CSS在HubSpot模板上居中表單。

使用水平分隔器模塊

• 按一下尋找工具中的範本名稱以編輯。
• 在右側的檢查器中，按一下+新增以插入兩個新的水平間隔模組；一個在表單模組的左側，另一個在右側。

使用自定義CSS

• 在尋找器中，我將CSS檔案放在資料夾中，然後按一下它在編輯器中選擇它。
• 添加以下代碼以將網站上的所有表單居中：

/*要在其模組中對中表單，並應用最大寬度*/ 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: center; } 

• 如果要將特定表單居中，您可以在範本上的表單模組中新增 自訂類別，然後調整CSS以僅適用於具有該類別的模組。 例如，如果您在模板上的表單模組中新增自訂類中心表單，您的CSS將如下所示：

/*要將表單放在其模組中，並套用最大寬度*/ 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; }

• 按一下右上角的「發佈變更」。