Центрирование контента внутри формы

Question

1) Как я могу центрировать содержимое внутри моей формы, как по вертикали, так и по горизонтали?2) Кроме того, как я могу отображать переключатели друг под другом?3) Правильно ли структурирована моя форма?

<div class="form-calc">
    <form action="" method="post">
        <fieldset>
            <div class="column">
                <div class="labels">
                    <label for="gender"><span>Gender:</span></label>
                </div>
                <label for="gender">
                    <input type="radio" nane="gender" id="gender" value="1">Male
                </label>

                <label for="gender">
                    <input type="radio" name="gender" id="gender" value="2">Female
                </label>

            </div>
            <div class="column">
                <div class="labels">
                    <label for="age">
                        <span>Age:</span>
                    </label>
                </div>
                <input type="number" id="age" name="age">
            </div>

            <div class="column">
                <div class="labels">
                    <label for="weight">
                        <span>Weight:</span>
                    </label>
                </div>
                <input type="number" id="weight" name="weight" placeholder="kg">
            </div>

            <div class="column">

                <div class="labels">
                    <label for="height">
                        <span>Height:</span>
                    </label>
                </div>

                <input type="number" id="height" name="height" placeholder="cm">
            </div>

            <div class="column">
                <div class="labels">
                    <label for="activity">
                        <span>Activity:</span>
                    </label>
                </div>

                <select id="activity" name="activity">
                    <option value="sedentary">Sedentary (office job)</option>
                    <option value="light">Light Exercise(1-2 days/week)</option>
                    <option value="moderate">Moderate Exercise(3-5 days/week)</option>
                    <option value="heavy">Heavy Exercise(6-7 days/week)</option>
                    <option value="athlete">Athlete</option>
                </select>
            </div>

            <p>
                <button>Calculate</button>
            </p>

        </fieldset>
    </form>

</div>

CSS:

.form-calc{
    width: 40%;
    margin: 0 auto;  
    text-align: center;  
}

.column{
    width: 100%;
    display: inline-block;
    margin: 10px 0;
}

.form-calc input,select {
    padding: 10px;
    width: 100px;
  }

  .form-calc input{
    width:10%;
    float:left;
}
.form-calc select{
    width:30%;
    float:left;
}

.form-calc label{
    width:30%;
    float: left;
    line-height: 30px;
  }

  .form-calc button {
    padding: 10px 20px;
    color: white;
  }

Вот как это выглядит. Я верю, что это из-за плавающих предметов, но я не знаю другого способа его стилизовать:

Answer 1

1) "align-items: center;"возможно, поможет вам.

2) Как насчет использования тега
?

3) Ваша форма правильно структурирована.

Если у вас есть другие вопросы или ошибка,пожалуйста, прокомментируйте ниже!

Answer 2

1. Вы можете использовать CSS для центрирования содержимого.Пожалуйста, обратитесь https://www.w3schools.com/css/css_align.asp

2. Вы можете использовать тег br для отображения переключателей друг под другом.Пожалуйста, обратитесь https://www.w3schools.com/tags/tag_br.asp

3. Да, ваша форма хорошо структурирована.