center radio

by kaumikaze

HTML

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

CSS

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;
}