内联表单输入，带有标签的输入居中

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; 添加到跨度

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