Centered text shifts down a line or so?

Classic
1

Is there a way to stop centered text from shifting down? Look at the Tipp City text in both screen shots please:

19%20PM
19%20PM1858Ă—930 266 KB
50%20PM
50%20PM1766Ă—910 261 KB

2

I think we’ll need to know how you are centering? Is this in a stack? Maybe a URL?

3

In the text stack. Page is not published yet.

43%20PM
43%20PM738Ă—328 70.9 KB

4

When you center the text, the styled text engine used by the text stack wraps the text in a paragraph tag <p> to do the centering. Prior to centering it, it is not in a <p> tag.

My guess is that your theme’s CSS has a top margin that gets applied to paragraphs. Without an url to see exactly what’s going on it’s hard to say for sure. We’d be guessing and any CSS we suggest could affect spacing on text elsewhere on the page.

If you can publish a test copy of the page and provide that url, we’d be able to help.

Duplicate the page using folder name you haven’t used on your site. Something like “testpage” would likely work. Under that page’s General Setting, uncheck “Show in navigation”. On the Meta Tags properties, Leave “Enable Robot Meta Tags” checked and uncheck “Index this page” and “Follow links”.

5

Here’s the link to the test page. Very little is complete. The only question I have is about the centered Tipp City text.
https://www.kitchyglass.com/page-4/

6

The theme leaves the browser default margin on paragraph tags <p>. By default, they have 1em of top and bottom margin. What you’re seeing is the addition of that additional margin when you center it, because it’s now in a <p> tag. Here are two options.

Remove the top margin on <p> tags. This could affect other spacing in the theme.

p {
    margin-top: 0;
}

Since you are using Stacks 4, instead of using the “center” text formatting feature, add a CSS class to the text stack to center the text. In the text stack’s settings, add a class of “center-text” and paste the following CSS in the site-wide CSS area.

.center-text {
	text-align: center;
}
2 Likes
7

The second method works great. I tried something else that which shows the text centered in both RW preview and edit. I added a Header X stack. Is there any reason why using a header stack here is a bad idea? My page is updated if you want to take a look.

17%20PM
17%20PM2022Ă—812 345 KB

8

I’m not familiar with that header stack, but it looks like a typical header stack with responsive alignment options.

There’s nothing wrong with using a header for that content. From an SEO standpoint, it’s probably better than leaving it in a regular text stack. That text is basically the title of the item being offered, and as such, it’s more important than just a regular paragraph of text.

9

Don, Thanks for your help with this. You taught me how to center text with Stacks 4, and I will use that in the future.

10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.