Last updated: July 8, 2024
Available with any of the following subscriptions, except where noted:
Marketing Hub
Professional
,
Enterprise
|
Content Hub
Professional
,
Enterprise
|
| Legacy Marketing Hub Basic |
If you're using layout templates created in the design manager tool, center an image, CTA (legacy), or logo module on your page, blog, or email, by adding inline styling to your template.
If you're using a template that includes a drag and drop area, you can center module alignment within the content editor. You can also center modules in the page editor using horizontal spacers.
Center an image, CTA (legacy), or logo with inline styling
Please note:
- This method requires a basic understanding of HTML.
- If your page or template has an attached stylesheet or any additional styling added, there may be existing CSS affecting your image, CTA (legacy), or logo. HubSpot recommends working with a designer to identify the source of the styling and make the necessary changes to center your assets.
To center an image, CTA (legacy), or logo in an email or page template:
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Content > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
- Blog: In your HubSpot account, navigate to Content > Blog.
- Email: In your HubSpot account, navigate to Marketing > Marketing Email.
- Hover over your content, then click Edit.
- In the editor, access your content's settings:
- For posts and pages, click the Settings menu and select Advanced.
- For emails, click the Settings tab, then click to expand the Advanced Options section.
- In the Template section, click Edit this template to open the template in the design manager.
- In the design manager, click the logo, call to action, or image module.
- In the right column, enter text-align: center; in the Inline styling field.
- In the upper right, click Publish changes to apply your changes to this template.
Center an image, CTA (legacy), or logo from your module's styling options
If you're using a template with a drag and drop area, in certain modules or sections, you can choose to set the alignment directly. Although, do note that this styling option may not be available on all templates or modules.
- To center page or post modules:
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Content > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
- Blog: In your HubSpot account, navigate to Content > Blog.
- In the page editor, click on the module that you want to center.
- In the left panel, click the Styles tab, then click to expand the Alignment and spacing section.
- Under Alignment, select the Center alignment.
-
- To center your email modules:
- In your HubSpot account, navigate to Marketing > Email.
- Hover over your email, then click Edit.
- Click on the module that you want to center.
- In the left panel, click the Alignment dropdown menu and select Center.
Center an image, CTA (legacy), or logo using horizontal spacers
If the module you're using does not have alignment options, from the content editor, you can add horizontal spacers to your page to center modules instead.
To center your module using a horizontal spacer:
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Content > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
- Blog: In your HubSpot account, navigate to Content > Blog.
- In the left column of the content editor, click + Add.
- In the search bar, search for horizontal spacer.
- Click and drag the horizontal spacers to each side of the module you want to center. Then, adjust the spacer's width to center your element.
