Can you center an object in liquid on Shopify?

Michael40
Visitor
2 0 8

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 8 (8)

Michael40
Visitor
2 0 8

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

Maneadams96
Visitor
2 0 0

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

Bijel
Visitor
1 0 0

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

Painfreeme
Visitor
1 0 0

🤣 I know right I was looking for ages! Thanks!

UmairA
Shopify Partner
1106 101 225

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 :))

fordtough68
Visitor
3 0 1

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. 

 

rickewing
Visitor
2 0 0

Can anyone help me center this?

 

<div class="index-sections">
{{ content_for_index }}

<div id="Jordan Anderson Racing" style=" padding:0px 100px 50px 100px; text-align: center; display: inline-block;">

<p>Bommarito Automotive Group is proud to sponsor Jordan Anderson, Parker Retzlaff and Jeb Burton.</p>
<p>Jordan Anderson Racing Bommarito Autosport is fielding two full-time cars in the NASCAR Xfinity Series (NXS) during the 2023 season. </p>
<p>Rookie Parker Retzlaff will sit behind the wheel of the team's NO. 31 FunkAway Chevrolet Camaro SS. </p>
<p>While the newly added No. 27 Alsco Chevrolet Camaro SS will be piloted by Jeb Burton. </p>
<p>After the completion of the first event of the 2023 season, the No. 31 begins the year 7th in the NXS Owner Point Standings </p>
<p>after Retzlaff’s 4th place finish on Saturday afternoon and the No. 27 starts the year 9th in the NXS Owner Point Standings after Burton’s 11th place finish. </p>
<p>For more information on JAR Bommarito Autosport visit bommarito.com. Follow the team on JAR Bommarito Autosport social channels; Facebook, Instagram, and Twitter.</p>

<p><button class="janderson" style="background-color:black; color:white !important;"><a href="https://www.lionelracing.com/search?keywords=jordan%20anderson" style="color:white !important;"><b>Check out Jordan Anderson Racing Xfinity diecasts here</b></a></button></p>



<img src="https://cdn.shopify.com/s/files/1/0068/3569/9773/files/Jar-Racing_Small_a6450c77-47a1-4301-8e8a-02b4...">




</div>
</div>

rickewing
Visitor
2 0 0

Can anyone help me center this? I've tried everything. 

 

<div class="index-sections">
{{ content_for_index }}

<div id="Jordan Anderson Racing" style=" padding:0px 100px 50px 100px; text-align: center; display: inline-block;">

<p>Bommarito Automotive Group is proud to sponsor Jordan Anderson, Parker Retzlaff and Jeb Burton.</p>
<p>Jordan Anderson Racing Bommarito Autosport is fielding two full-time cars in the NASCAR Xfinity Series (NXS) during the 2023 season. </p>
<p>Rookie Parker Retzlaff will sit behind the wheel of the team's NO. 31 FunkAway Chevrolet Camaro SS. </p>
<p>While the newly added No. 27 Alsco Chevrolet Camaro SS will be piloted by Jeb Burton. </p>
<p>After the completion of the first event of the 2023 season, the No. 31 begins the year 7th in the NXS Owner Point Standings </p>
<p>after Retzlaff’s 4th place finish on Saturday afternoon and the No. 27 starts the year 9th in the NXS Owner Point Standings after Burton’s 11th place finish. </p>
<p>For more information on JAR Bommarito Autosport visit bommarito.com. Follow the team on JAR Bommarito Autosport social channels; Facebook, Instagram, and Twitter.</p>

<p><button class="janderson" style="background-color:black; color:white !important;"><a href="https://www.lionelracing.com/search?keywords=jordan%20anderson" style="color:white !important;"><b>Check out Jordan Anderson Racing Xfinity diecasts here</b></a></button></p>



<img src="https://cdn.shopify.com/s/files/1/0068/3569/9773/files/Jar-Racing_Small_a6450c77-47a1-4301-8e8a-02b4...">




</div>
</div>