跳到内容

将表单置于 HubSpot 模板的中心位置

上次更新时间: 二月 12, 2025

除非另有说明,否则适用于以下任何订阅

营销 Hub   Professional , Enterprise
内容 Hub   Professional , Enterprise
旧版 Marketing Hub Basic

您可以使用水平间隔模块或自定义 CSS 在 HubSpot 模板上将表单居中。

使用水平间隔模块

  • 在 HubSpot 帐户中,导航到内容 > 设计管理器
  • 点击查找器中的模板名称进行编辑。
  • 在右侧的检查器中,点击+ 添加,插入两个新的水平间隔模块;一个在表单模块的左侧,另一个在表单模块的右侧。

使用自定义 CSS

  • 在 HubSpot 帐户中,导航到内容 > 设计管理器
  • 在查找器中找到文件夹中的CSS 文件,然后单击该文件,在编辑器中将其选中。
  • 添加以下代码,使网站上所有表单居中:
/* To center the form within its module and applying a max-width */ form.hs-form, .hs_cos_wrapper .form-title { max-width: 600px; display: block; margin: 0 auto; } /* To center the form title within a form module */ .hs_cos_wrapper .form-title { text-align: center; } /* To center the form submit button */ .hs_submit { text-align: center; } 
  • 如果你想让特定表单居中,可以在模板上的表单模块中添加自定义类,然后调整 CSS,使其只适用于带有该类的模块。例如,在模板的表单模块中添加自定义类center-form,CSS 就会如下所示:
/* To center the form within its module and applying a max-width */ form.hs-form, .center-form .hs_cos_wrapper .form-title { max-width: 600px; display: block; margin: 0 auto; } /* To center the form title within a form module */ .center-form .hs_cos_wrapper .form-title { text-align: center; } /* To center the form submit button */ .center-form .hs_submit { text-align: center; }
  • 在右上角单击 "发布更改"
这篇文章有帮助吗?
此表单仅供记载反馈。了解如何获取 HubSpot 帮助