How to Center Everything on Custom Page Template (Dawn)

[claribelskincar]

Hi there,  I've created a custom page template, but need to know how to center the title and everything else on that custom page please.  Just this template - not any others.  Appreciate your help!

[Moeed]

Hey @claribelskincar 

Can you share that page link with me?

Best,

Moeed

[claribelskincar]

https://claribelskincare.com/pages/all-natural-eyelash-growth-serum

Please ignore the blurbs of text.  I need the title and the text centered, as well as anything else on this particular page.  It is a custom page, so it should not affect any other pages (hopefully). Thank you.

[CodingFifty]

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.section-template--19196959916269__main-wide-padding {
    text-align: center !important;
}

[CodingFifty]

Hey @claribelskincar,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.main-page-title {
    text-align: center !important;
}

[claribelskincar]

I don't have this file.  

[claribelskincar]

This has to be wrong.  I don't have that file.

[bryan76]

try:

* { text-align: center !important; }

or

* {align-items: center;}

[claribelskincar]

Am I supposed to add this to my custom page template coding? 

[bryan76]

sorry, add to the Custom CSS of individual sections in the theme editor.  click the section and scroll to the bottom (under padding).  in this section you can edit most anything regarding the visuals like fonts, font size, font color, background color, margins, etc. etc. 

[Dan-From-Ryviu]

You can do that by adding this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings. 

#shopify-section-template--19196959916269__main-wide * { text-align: center; }

[mt686]

Hey there!

Great question! To center everything on just your custom page template, you'll need to add some CSS that targets only that specific template. Here's how:

Solution: Add template-specific CSS

1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code
2. Find your custom page template file (likely in Templates folder, something like page.custom.liquid)
3. Add this CSS at the top or bottom of that template file:

<style>
/* Center everything on this custom page only */
.page-width {
  text-align: center;
}

.page-title,
.page__title {
  text-align: center;
}

.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6,
.rte p, .rte ul, .rte ol {
  text-align: center;
}

/* Center any images */
.rte img {
  display: block;
  margin: 0 auto;
}

/* Center any buttons */
.btn {
  display: block;
  margin: 0 auto;
  width: fit-content;
}
</style>

Alternative approach - if you want to be more specific, you can target by the page handle:

<style>
/* Replace 'your-page-handle' with your actual page handle */
.template-page .page--your-page-handle {
  text-align: center;
}

.template-page .page--your-page-handle .page-width * {
  text-align: center;
}
</style>

The page handle is the URL-friendly version of your page name (spaces become dashes, etc.).

Quick idea: If you're planning to create more custom layouts or make other design changes, I actually developed Easy Edits that lets you visually center elements, adjust alignments, and customize pages without touching any code. Just click and drag to center everything exactly how you want it!

Try the first code snippet and let me know if everything centers properly for you!