How to align three divs containing radio inputs - html

Question

I have three divs in a form that accept radio buttons as input. Currently with my css it looks like this:
Please see this link
O Text O Text O Text
O Text O Text&Text O Text
O Text O Text
How can I edit my css to make it so that the radio buttons are vertically aligned AND the whole set of radio inputs center aligned , something like this:
O Text O Text O Text
O Text O Text&Text O Text
O Text O Text
This is the code I have
Thank you!
<div class="form-group">
<label for="material" class="text-light">Text</label>
<div class="radio inline">
<input type="radio" id="plastic" name="material" value="Plastic">
<label for="plastic" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="cans" name="material" value="Cans">
<label for="cans" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="paper" name="material" value="Paper">
<label for="paper" class="radio-label">Text</label>
</div>
</div>
<div class="form-group">
<label for="relationship" class="text-light">Text</label>
<div class="radio inline">
<input type="radio" id="school" name="relationship" value="School">
<label for="school" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="family" name="relationship" value="Friends & Family">
<label for="family" class="radio-label">TextText</label>
</div>
<div class="radio inline">
<input type="radio" id="company" name="relationship" value="Company">
<label for="company" class="radio-label">Company</label>
</div>
</div>
<div class="form-group">
<label for="frequency" class="text-light">Type</label>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="Repeating" value="Repeating">
<label for="Repeating" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="One-Time" value="One-Time">
<label for="One-Time" class="radio-label">Text</label>
</div>

Answer 1

If you wrap these form-groups in a container, you can set that container to display: flex which will allow you to use flexbox properties to align your form groups as needed.
<div class="radio-container">
<fieldset class="form-group">
<legend id="material" class="text-light">Text</legend>
<div class="radio inline">
<input type="radio" id="plastic" name="material" value="Plastic">
<label for="plastic" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="cans" name="material" value="Cans">
<label for="cans" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="paper" name="material" value="Paper">
<label for="paper" class="radio-label">Text</label>
</div>
</fieldset>
<fieldset class="form-group">
<legend id="relationship" class="text-light">Text</legend>
<div class="radio inline">
<input type="radio" id="school" name="relationship" value="School">
<label for="school" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="family" name="relationship" value="Friends & Family">
<label for="family" class="radio-label">TextText</label>
</div>
<div class="radio inline">
<input type="radio" id="company" name="relationship" value="Company">
<label for="company" class="radio-label">Company</label>
</div>
</fieldset>
<fieldset class="form-group">
<legend id="frequency" class="text-light">Type</legend>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="Repeating" value="Repeating">
<label for="Repeating" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="One-Time" value="One-Time">
<label for="One-Time" class="radio-label">Text</label>
</div>
</fieldset>
</div>
.radio-container{
display: flex;
justify-content: center;
}

Answer 2

You can use display:flex along with a width:Xpx to create aligned rows. Then justify-content: center; on the whole flex container to center it. If you want the title label text to align with the radio label text you can set the radios to absolute postion and put a common padding on all labels
.container {
display: flex;
margin: auto;
justify-content: center;
}
.radio.inline {
width: 100px;
}
label {
padding-left: 25px;
}
input[type='radio'] {
position: absolute;
}
<div class="container">
<div class="form-group">
<label for="material" class="text-light">Text</label>
<div class="radio inline">
<input type="radio" id="plastic" name="material" value="Plastic">
<label for="plastic" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="cans" name="material" value="Cans">
<label for="cans" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="paper" name="material" value="Paper">
<label for="paper" class="radio-label">Text</label>
</div>
</div>
<div class="form-group">
<label for="relationship" class="text-light">Text</label>
<div class="radio inline">
<input type="radio" id="school" name="relationship" value="School">
<label for="school" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="family" name="relationship" value="Friends & Family">
<label for="family" class="radio-label">TextText</label>
</div>
<div class="radio inline">
<input type="radio" id="company" name="relationship" value="Company">
<label for="company" class="radio-label">Company</label>
</div>
</div>
<div class="form-group">
<label for="frequency" class="text-light">Type</label>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="Repeating" value="Repeating">
<label for="Repeating" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="One-Time" value="One-Time">
<label for="One-Time" class="radio-label">Text</label>
</div>
</div>