Center align text on @hubspot/header on a template level

Developer Support CMS Development
1

How do you center the text in a hubspot/header module on a template level?

I have been checking on the hubspot documentation and I can’t find it there.
Already checked here: Accounts Dashboard | HubSpot, here: Default web modules - HubSpot docs, and here: Drag and Drop Areas HubL Tags - HubSpot docs and didn’t found any info/solution.

I think they should at least provide how to add default styling to modules on a template level.
Here’s what my dnd_module looks like.

{% dnd_module
path="@hubspot/header",
value="Heading",
header_tag="h2"
%}
2

Hello @marth ,

you module should look like this:

{% dnd_module
path="@hubspot/header",
value="Heading",
header_tag="h2"
horizontal_alignment="CENTER"
%}
{%end_dnd_module%}

It is in this documentation:

Best regards

Özcan

3

Hi Oezan,
Thank you for the quick reply. But it only centers the wrapper of the heading itself. What we need is a way to center the text itself.

Screen Shot 2022-02-01 at 4.30.23 PM.png
Screen Shot 2022-02-01 at 4.30.23 PM.png1810×874 92.4 KB

4

@Jaycee_Lewis this answer should be an accepted solution :slightly_smiling_face:

5

gladly,
for the text you have to select the element, in your code e.g. it was the h2, and in your css write e.g.

h2 {
text-align: center

}

Best regards,

Özcan

6

Thank Oezcan. We just did this one since Webdew mentioned there’s no option for it.

7

Hi @marth ,
There is no option provided by Hubspot header.module for aligning the text center. you can Center the text by using css or you can clone the module and add editable fields there for customizing.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

8

I see. Thank you for the clarification. Although I am still confused because once you edit the module. There’s a style tab on the module and there’s a text alignment option on it.