Center an object in liquid

Michael40
New Member
2 0 3

Is there a tag in liquid that will center and object, or center some text or center anything I've looked extensively and haven't found any answers.

Replies 5 (5)
Michael40
New Member
2 0 3

Finally found it "<center> (object) </center>" works on some stuff. Some thing this simple should not have been this difficult to find

Maneadams96
New Member
2 0 0

where do you embed it within the code you want to center?

UmairA
Shopify Partner
940 86 188

Hi @Michael40 ,

Centering an element is not the job of the liquid but of CSS. Here is how you can do it.

Go to the liquid file where you've the element to be centered for example you have  a paragraph tag (<P></P>) inside a div tag (<div></div>) and you want to center it.

Just add the following class to the paragraph tag <p class-"cm_center"></p>

Now go to theme.scss.liquid and add the following code 

.cm_center {
text-align: center; //If it's a text element
//If it's not a text element like paragraph then
width: 50px; //You can change the width
margin: auto;
}

Let me know if you need any help.

Cheers :))

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
Bijel
New Member
1 0 0

This solution worked for me!!!! Thank you!!!

fordtough68
New Member
3 0 0

Hi, Michael. 

I'm trying to get my datepicker to center in my screen and have it mandatory before a customer can check out. Can you help me with this? I see solutions but nothing seems to work, but I might be putting the code in the wrong place. It works great, just off to the left instead of centered.