Use CSS flexbox to move radio below label

Question

I can't modify the output of this html but I can use CSS to move the items around. I saw this and know that I can move the elements around using that but I want the bullets to move below the words and center both. I'm trying get it to look like this using the html in this one. This is what I have so far

#edit-submitted-recommendation {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
}
.form-radio {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
.option {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

score 0 · Answer 1 · answered Oct 06 '15 at 20:37

I would try something like this. It's a but off because best case would be swapping the position of the label and input in the div, but if you can only edit the css this works

div.form-item{
    display:inline-block;
}
div.form-item input{
    display:block;
    margin: 0 auto;
}
div.form-item label{
    display:block;
    text-align:center;
    margin-top:-40px;
}

score 0 · Answer 2 · answered Oct 06 '15 at 22:05

Make your .form-items inline flexboxes and set the flex-flow to column.
Use order to put the labels on top.
Center your labels and inputs.

This gets the labels on top of the buttons and centers them. Make it look a bit nicer by surrounding the options with some whitespace. It should now look like somewhat like this.

Use CSS flexbox to move radio below label

2 Answers2