How do I let my inputs centralize radio?

Question

I wanted to leave all items within the "Class;" centered straight and justified, with 3 items on the same line.

https://jsfiddle.net/kaumikaze/pru0agw5/9/

input {
    width: 4.5rem;
}

.div-status {
    background: #00000000;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
}

.div-classes {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    max-width: 60ch;
    text-align: inherit;
}

<div class="div-classes">

<fieldset>

<legend>Classes;</legend>

<label>
  <input type="radio" name="classes" value="Alquimista">
    Alquimista</input>
</label>
                        
<label>
  <input type="radio" name="classes" value="Assassino">
    Assassino</input>
</label>
                        
<label>
  <input type="radio" name="classes" value="Berserker">
    Berserker</input>
</label>
                        
<label>
  <input type="radio" name="classes" value="Cacador">
    Caçador</input>
</label>
                        
<label>
  <input type="radio" name="classes" value="Clerigo">
  Clérigo</input>
</label>
           
<label>
  <input type="radio" name="classes" value="Duelista">
  Duelista</input>
</label>
                     
<label>
  <input type="radio" name="classes" value="Feiticeiro">
  Feiticeiro</input>
</label>
                      
<label>
  <input type="radio" name="classes" value="Guardiao">
  Guardião</input>
</label>
                            
<label>
  <input type="radio" name="classes" value="Guerreiro">
  Guerreiro</input>
</label>
                     
<label>
  <input type="radio" name="classes" value="Lutador">
  Lutador</input>
</label>
                    
<label>
  <input type="radio" name="classes" value="Menestrel">
  Menestrel</input>
</label>
                      
<label>
  <input type="radio" name="classes" value="Paladino">
  Paladino</input>
</label>
                        
<label>
  <input type="radio" name="classes" checked="checked" value="Samurai">
  Samurai</input>
</label>
                        
</fieldset>

</div>

Answer 1

You have to take this width of input, besides said input does not need the closing tag </input>

Then you put the width in label that the input is inside, and makes a calc() to fit 3 per line.

Follow an example by taking advantage of your code, and making simple adjustments to CSS.

label {
  display: inline-block;
  width: calc(100% / 3 - 1em);
}

fieldset {
  padding: 0.5em;
}

.div-status {
  background: #00000000;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}

.div-classes {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-width: 60ch;
  text-align: inherit;
}

<div class="div-classes">

  <fieldset>

    <legend>Classes;</legend>

    <label>
      <input type="radio" name="classes" value="Alquimista">
      Alquimista
    </label>

    <label>
      <input type="radio" name="classes" value="Assassino">
      Assassino
    </label>

    <label>
      <input type="radio" name="classes" value="Berserker">
      Berserker
    </label>

    <label>
      <input type="radio" name="classes" value="Cacador">
      Caçador
    </label>

    <label>
      <input type="radio" name="classes" value="Clerigo">
      Clérigo
    </label>

    <label>
      <input type="radio" name="classes" value="Duelista">
      Duelista
    </label>

    <label>
      <input type="radio" name="classes" value="Feiticeiro">
      Feiticeiro
    </label>

    <label>
      <input type="radio" name="classes" value="Guardiao">
      Guardião
    </label>

    <label>
      <input type="radio" name="classes" value="Guerreiro">
      Guerreiro
    </label>

    <label>
      <input type="radio" name="classes" value="Lutador">
      Lutador
    </label>

    <label>
      <input type="radio" name="classes" value="Menestrel">
      Menestrel
    </label>

    <label>
      <input type="radio" name="classes" value="Paladino">
      Paladino
    </label>

    <label>
      <input type="radio" name="classes" checked="checked" value="Samurai">
      Samurai
    </label>

  </fieldset>

</div>