html - 内联表单输入，标签位于输入上方居中

Question

我有一个表单，每个输入上都有长标签，我希望输入在每个标签下方居中，但我还需要输入保持内联。它应该如下所示，但输入应该在每个长标签下居中。

这是我所拥有的，但我无法将输入集中在标签下。

.question-container {
  width: 1000px;
  margin: 0 auto;
}

#questions {
  margin: 5px 30px;
  display: inline-block
}

<div class="form-inline">
    <span id="questions">
        <label>How much will your house cost?</label>
        <input class="form-control" type="text" placeholder="input">
      </span>
    <span id="questions">
        <label>What is the most you can pay monthly?</label>
        <input class="form-control" type="text" placeholder="input">
      </span>
    <span id="questions">
        <label>What is your Current Monthly Rent?</label>
        <input class="form-control" type="text" placeholder="input">
      </span>
  </div>
  <div id='centered'>
    <button type="submit" class="btn btn-primary mb-2">Submit</button>
  </div>

如有任何帮助，我们将不胜感激!

Answer 1

知道了!

只需要添加 text-align:center; 到 span

#questions {
   margin:5px 30px;
   display:inline-block;
   text-align:center;
}