html - 如何将带有标签的输入框下的文本居中？

Question

听起来很简单，但是说我正在使用 Bootstrap 并且输入框有一个标签，当我调整大小时下面的文本没有居中。

这里有一些简单的 html 来演示:

    <form action="http://google.com">
        <div>
            <label for="inputBox">Email address</label>
            <input name="email" type="text" id="inputBox"/>
            <br>
            (Center under input)
        </div>
    </form>

标签应与输入文本框相关联，文本'(Center under input)应出现在输入框下方的中间。

因此，理想情况下，(在输入下居中)文本应该粘在输入文本框下方的中央，而标签正常运行。

这可能吗？我现在正在尝试使用一张 table (所有东西)，但无法让它正常运行，我已经尝试过定位等。仍然没有运气。

非常感谢任何帮助。

Answer 1

如果你想让事物相对于彼此居中，那么它们通常应该放在容器中。

div,
label {
  display: inline-block;
  vertical-align: top;
}
div {
  text-align: center;
}

<form action="http://google.com">
  <div>
    <label for="inputBox">Email address</label>

    <div>
      <input name="email" type="text" id="inputBox" />
      <br>(Center under input)
    </div>
  </div>
</form>

您的示例内容太抽象了，但如果与输入相关联，您的居中内容可能应该是另一个标签元素。