html - 将表单中的内容居中

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

这就是它的样子。我相信这是因为 float 元素，但我不知道任何其他方式来设置它的样式:

Answer 1

1. 您可以使用 CSS 使内容居中。请引用 https://www.w3schools.com/css/css_align.asp

2. 您可以使用 br 标签在彼此下方显示单选按钮。请引用 https://www.w3schools.com/tags/tag_br.asp

3. 是的，您的表单结构良好。