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

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

知道了！

只需将 <header> <h1 id="T">Index</h1> </header> <main> <nav> <ul> <li><a>Topologie</a></li> <li><a>Classificazione</a></li> <li><a>Dizionario terminologico</a></li> <li><a href="Pagine\Domini.html">Domini</a></li> <li><a>Apparati</a></li> </ul> </nav> <article> <h2>Definizione di Rete</h2> Una rete di telecomunicazioni è un insieme di dispositivi e dei loro collegamenti (fisici o logici) che consentono la trasmissione e la ricezione di informazioni di qualsiasi tipo tra due o più utenti situati in posizioni geograficamente distinte, effettuandone il trasferimento attraverso cavi, sistemi radio o altri sistemi elettromagnetici o ottici. <br><br><img src="Immagini/ImmagineRete.png"> </article> </main> <footer> <p>Ultimo aggiornamento: Sabato 19 Maggio</p> <p><a href="#T">Torna all'inizio</a></p> </footer> </body> </html>添加到范围

即可

text-align:center;