Выравнивание радиоприемника с настраиваемыми радиостанциями

Question

Не могу понять, почему я не могу выровнять следование по центру.Классы не включают указанную позицию, за исключением класса .c и специализированного контейнера div (не в CSS), который влияет только на часть количества, но должен выравнивать все в центре этого div.Я пишу с AngularJs, так что, может быть, есть другой способ выровнять все лучше?может с коробкой-выровнять?Или это как-то связано с метками / пролетами?

#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

Один из способов сделать это - добавить разрывы между переключателями и изменить их отображение с block на inline.

Добавлен красный цвет фона для выделения.

Например:

#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>

Еще один способ добиться этого - еще раз включить теги br между переключателями и добавить стиль к элементу, охватывающему переключатели,в этом случае h5.Заставьте этот стиль выровнять текст по левому краю, затем объявите его ширину и добавьте padding-left к элементу.

Пример с синей рамкой для выделения:

#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>