將表單內的內容居中

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. 您可以使用CSS來居中內容。 請參閱https://www.w3schools.com/css/css_align.asp

2. 您可以使用br標簽在彼此下方顯示單選按鈕。 請參閱https://www.w3schools.com/tags/tag_br.asp

3. 是的，您的表單結構良好。

Answer 2

1）“對齊項目：中心;” 也許會幫助你。

2）嘗試<br>標簽怎么樣？

3）您的表格結構合理。

如果您有其他問題或錯誤，請在下面評論！