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

您可以使用CSS将内容居中。请参考 https://www.w3schools.com/css/css_align.asp
您可以使用br标签在彼此下方显示单选按钮。请参考 https://www.w3schools.com/tags/tag_br.asp
是的，您的表格结构良好。

Answer 2

1）“ align-items：center;”也许会帮助您。

2）尝试使用
标签怎么样？

3）您的表格结构正确。

如果您还有其他问题或错误，请在下面评论！

将内容居中放置在表单中

2 个答案: