Centering Dropdown Text

New Member
11 0 0

I'm looking to center the text within the dropdown, but can't seem to figure out how to do it across all browsers.

 

Screen Shot 2019-10-02 at 3.15.19 PM.png


I figured out how to do it for Google Chrome, but it looks like it doesn't work for Safari and other browsers.

 

Does anyone have experience with centering this?

0 Likes
Shopify Staff
Shopify Staff
616 41 87

Hi, there.

 

Dallas here from the Social Care Team.

 

Can you explain what you did to make this text centered on Google Chrome? The reason that I ask is that it seems like it's a customization that would require a change to the back end and the CSS.

 

Can you share what theme you're using?

 

I look forward to hearing back from you.

Dallas | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
11 0 0
I added this line of css to the tag:

text-align-last: center;
0 Likes
Shopify Expert
665 170 199

Hi, @jeroesguerra ,

This is Evita from On The Map.

 

Try replacing with this code: 

.className {
    display:  flex;
    align-items: center;
    justify-content: center;
}

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
11 0 0

@OTM Hey Evita, 

 

Unfortunately, that didn't work.

0 Likes
Shopify Expert
665 170 199

Can you add your store URL? 

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
11 0 0
Hey @Dallas,

I forgot to add the theme.

I am using the Bravo theme
0 Likes
New Member
11 0 0
@OTM Operationrally.com
0 Likes
Shopify Expert
665 170 199

Add this code:

.single-option-selector {
    width: 100%;
    text-align-last: center;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Shopify Expert
665 170 199

Or add this:

.single-option-selector {
    text-align-last:center;
    padding-right: 29px;
    direction: rtl;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes