Help with radio buttons...<>

I need help to arrange my radio buttons. I used the text-align: center; but it moved the text only and the radio buttons remained on the left. How can I move them along with text in the center?
Here’s the link to my project:


.opt {
    left: -43px;
    margin-left: 10px;
    display: block;

Remove that 3 property to get next to text radio buttons.

1 Like

That solved my problem!
Can you explain it too?

Well display block make new line for checkbox what is you not need also left and margin-left make a huge space between the checkbox and the label name so you also no need that.

1 Like

Thanks! Got it. :smiley:

Now your radio input is inside a label which is inside an li which is by default display:block; which makes your .radio class unnecessary because of the #form-out styles.

Add *{border: red 2px solid;} to your CSS. See that box with no right side? It’s because you forgot to close your label. Also at the end the </div> is in the wrong place. The ids in the radio buttons are wrong and some of the input types are wrong.

What if you centered the last elements like this?

1 Like