How to place radio buttons to the center of the images

  • Profile Image
    Asked on June 12, 2017 at 07:47 AM


    I have attached URL images to my radio buttons but the buttons are left aligned and i would like them to be centre aligned on top of the image. Can this be done?



  • Profile Image
    Answered on June 12, 2017 at 10:35 AM

    Hello @willothewisp,

    We're sorry for the inconvenience you have.

    I have checked your form named "Order Form" and I have seen that you have images in the radio buttons as seen below:

    I have cloned your form on my side in order to test it. You can inject the following CSS codes in order to align the buttons as you can see in the following screenshot:


      text-align: center;

      width: 100%;


    I hope this helps. If you need further assistance, let us know.

    Thank you.

  • Profile Image
    Answered on June 12, 2017 at 11:43 PM
    thank you so much! I’m so sorry but also how do i get the buttons to be at the bottom of the image?
  • Profile Image
    Answered on June 13, 2017 at 01:47 AM

    I see that you are using the regular radio button, how about using this widget instead? This has the built in style you're looking so you don't have to customize it.

    You might also want to try this image picker widget

    Let us know if you still prefer the regular radio button so we can assist you further.

  • Profile Image
    Answered on June 13, 2017 at 02:27 AM

    Thanks everyone. I think the Widget buttons will work better for what i want.

    However i need to change the font on the widget buttons to match the rest of my form. Im using Josephine Sans.

    Secondly is there a way to change ALL type letter spacing for Josephine sans to 0.1em?


  • Profile Image
    Answered on June 13, 2017 at 02:40 AM


    I opened a separate thread for your last questions and we will attend them here:

    Thank you!