Center Select and Button

  • Resolved nar329

    (@nar329)


    5 years, 3 months ago

    Hello, Happy Holidays, and God bless you!

    I am trying to find a way to center select (e.g., the dropdown for size / quantity of product /etc.) and button (e.g., the add to cart button) across the website, so they would hopefully be centered on both web/mobile.

    To be clear, I mean centering the entire select or the entire button itself, not the text inside of it.

    I did notice the idea of putting them in a centered paragraph to center them. However, I am very new to css/php (i.e., I have somehow been managing for two days now lol), so I do not know exactly what code to use to do it.

    I am also keeping a look out for the simplest solution so if I find something that works I will share it ASAP.

    Thanks in advance for any help! Much love

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter nar329

    (@nar329)

    Another idea I had based on the idea to center them through a centered paragraph, is to move them into the short description, which is already there and centered. I do not know what the exact code would be. I imagine it would apply to product pages only though.

    Theme Author Tom

    (@edge22)

    Hi there,

    This CSS should help center the add to cart button:

    .single_variation_wrap {
    display: flex;
    justify-content: center;
}

    I don’t believe it’s possible to center the text inside the select input, unfortunately – that’s up to the browser.

    Let me know if you need more info ??

    Thread Starter nar329

    (@nar329)

    Thank you so much, Leo! It worked!

    I played around with the margins and found something that worked for me to center the select. I used:

    .woocommerce div.product form.cart .variations select#size {
    margin-left: 22.7px;
}

    It helped to cross-reference the mobile version of the page and zoom in to see how close I was getting to perfecting the centered look.

    Thread Starter nar329

    (@nar329)

    Oh my goodness! I got confused with names between writing an e-mail and writing my reply here, forgive me!

    THANK YOU, TOM*!!!!!

    Seriously, thank you so much. It means the world to me. Again, I apologize for that. It’s no excuse, but I’ve never spent so much time looking at code and multitasking with code-related work involved T^T

    You have no idea how grateful I am for your help.

    Theme Author Tom

    (@edge22)

    No problem! I’m glad I could help ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Center Select and Button’ is closed to new replies.