Question

How to center text under a radio button

Laserfiche Forms Version 9 How To

Updated June 24, 2016

asked on June 23, 2016 • Show version history

Hello,

I have radio buttons in one column in a table and I'd like to have the radio buttons centered in its cell, along with text below the button that is centered. By default, the text sits directly to the right of the radio button.

Here's currently what I have. Note that the text is slightly off center to the right (I'd like to have it perfectly centered):

and the css I have styling it:

input[type=radio] {
margin: 0;
display: block;
}

Additional info: I'm using laserfiche forms, version 9.

Thank you very much in advance!

0 0

Answer

SELECTED ANSWER

replied on June 23, 2016

Ah you have the radio button within a table column? I missed that part. Give this a go and see if it fixes it. I'm on Forms 10.1 so mileage may vary.

.choice label.form-option-label {
  margin:0;
  text-align: center;
  display: block;
}

input[type=radio] {
     margin: 0;
       display: block;
  		text-align: center;
 }

1 0

Replies

replied on June 23, 2016

would this work?

text-align: center;

0 0

replied on June 23, 2016

Hi Jonathan,

It looks like there's some automatic padding going on. Try this.

div #Field36 {text-align: center;}  //Change to whatever the Q value is of the radio button question

.choice label.form-option-label {margin: 0;}

input[type=radio] {
     margin: 0;
       display: block;
 }

0 0

View 2 previous replies

replied on June 23, 2016

Then if you wanted to move the buttons more towards the Question label, change the width of the div #Field36 line.

div #Field4 {text-align:center;width: 20%;}

.choice label.form-option-label {margin: 0;}

input[type=radio] {
     margin: 0;
       display: block;
  		text-align: center;
 }

Cheers,

Carl

2 0

replied on June 23, 2016

Hey Carl! Thank you for your response.

It works pretty well, and I think it's good enough. But it is SLIGHTLY off center to the left now. See below:

I think this is livable, but is there anything I can do to perfectly center it?

My CSS:

div #Field36 {
text-align: center;
}

.choice label.form-option-label {
margin: 0;
}

input[type=radio] {
margin: 0;
display: block;
text-align: center;
}

Thank you!

0 0

SELECTED ANSWER

replied on June 23, 2016

Ah you have the radio button within a table column? I missed that part. Give this a go and see if it fixes it. I'm on Forms 10.1 so mileage may vary.

.choice label.form-option-label {
  margin:0;
  text-align: center;
  display: block;
}

input[type=radio] {
     margin: 0;
       display: block;
  		text-align: center;
 }

1 0

replied on June 24, 2016

This worked! Thank you :)

0 0

replied on June 24, 2016

Awesome!

0 0

You are not allowed to follow up in this post.

Question

Question

How to center text under a radio button

Answer

Replies

Sign in to reply to this post.