Alignment of a radio from with custom radios - html

Question

I can not find out why I cannot align following in the center. The classes do not include a specified position, except for the .c class and the specialized container div(not in CSS), which only has an influence on the amount part, but is supposed to align everything in the center of this div. I write with AngularJs, so maybe there is another way to align everything better? maybe with a box-align? Or does it have something to do with the labels/spans?
#spread {
background-color: #0BD44A;
padding: 15px;
margin: 15px;
border-radius: 8px;
}
.c {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
/* Hide the browser's default radio button */
.c input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #BEBEBE;
border-radius: 8px;
}
/* On mouse-over, add a grey background color */
.c:hover input~.checkmark {
background-color: #F5F5F5;
}
/* When the radio button is checked, add a blue background */
.c input:checked~.checkmark {
background-color: white;
}
<div id="spread">
<h1>Spread</h1>
<div class="container" align=center>
<h2>Answer following questions and find out how to diversify your capital:</h2>
<label for="amount">
<br>
<h4>Amount you plan to invest:</h4>
<input type="number" class="form-control" id="amount" style="text-align:center" placeholder="250.00$">
</label>
<hr>
<h4>Time-period:</h4>
<h5>
<label class="c">short
<input type="radio" name="radiotime" value="1">
<span class="checkmark"></span>
</label>
<label class="c">medium
<input type="radio" name="radiotime" value="2">
<span class="checkmark"></span>
</label>
<label class="c">long
<input type="radio" name="radiotime" value="3">
<span class="checkmark"></span>
</label>
</h5>
<hr>
<h4>Risk-level:</h4>
<h5>
<label class="c">high
<input type="radio" name="radiorisk" value="1">
<span class="checkmark"></span>
</label>
<label class="c">medium
<input type="radio" name="radiorisk" value="2">
<span class="checkmark"></span>
</label>
<label class="c">low
<input type="radio" name="radiorisk" value="3">
<span class="checkmark"></span>
</label>
</h5>
<app-chart></app-chart>
</div>
</div>
**

Answer 1

One way to do it is to add breaks between the radio buttons, and change their display from block to inline.
Added red background color for emphasis.
For example:
#spread {
background-color: #0BD44A;
padding: 15px;
margin: 15px;
border-radius: 8px;
}
.c {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
.inlineRed {
display: inline;
background-color: red;
}
/* Hide the browser's default radio button */
.c input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #BEBEBE;
border-radius: 8px;
}
/* On mouse-over, add a grey background color */
.c:hover input~.checkmark {
background-color: #F5F5F5;
}
/* When the radio button is checked, add a blue background */
.c input:checked~.checkmark {
background-color: white;
}
<div id="spread">
<h1>Spread</h1>
<div class="container" align=center>
<h4>Risk-level:</h4>
<h5>
<label class="c inlineRed">high
<input type="radio" name="radiorisk" value="1">
<span class="checkmark"></span>
</label>
<br>
<label class="c inlineRed">medium
<input type="radio" name="radiorisk" value="2">
<span class="checkmark"></span>
</label>
<br>
<label class="c inlineRed">low
<input type="radio" name="radiorisk" value="3">
<span class="checkmark"></span>
</label>
</h5>
<app-chart></app-chart>
</div>
</div>
Another way to achieve this is once again include br tags between the radio buttons, and add a style to the element that is wrapping the radio buttons, in this case, the h5. Make that style align the text left, then declare its width and add padding-left to the element.
Example, with blue-border for emphasis:
#spread {
background-color: #0BD44A;
padding: 15px;
margin: 15px;
border-radius: 8px;
}
.blue-border {
border: 3px solid blue;
text-align: left;
width: 50%;
padding-left: 25%;
}
.c {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
/* Hide the browser's default radio button */
.c input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #BEBEBE;
border-radius: 8px;
}
/* On mouse-over, add a grey background color */
.c:hover input~.checkmark {
background-color: #F5F5F5;
}
/* When the radio button is checked, add a blue background */
.c input:checked~.checkmark {
background-color: white;
}
<div id="spread">
<h1>Spread</h1>
<div class="container" align=center>
<h4>Risk-level:</h4>
<h5 class="blue-border">
<label class="c inlineRed">high
<input type="radio" name="radiorisk" value="1">
<span class="checkmark"></span>
</label>
<br>
<label class="c inlineRed">medium
<input type="radio" name="radiorisk" value="2">
<span class="checkmark"></span>
</label>
<br>
<label class="c inlineRed">low
<input type="radio" name="radiorisk" value="3">
<span class="checkmark"></span>
</label>
</h5>
<app-chart></app-chart>
</div>
</div>