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

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>

标签应与输入文本框相关联,文本'(输入中心)应出现在中间的输入框下方.

因此理想情况下(输入中心)文本应粘贴在输入文本框下方的中央,而标签正常运行.

这可能吗？我正在尝试用一张桌子(所有东西),但是不能让它表现出来,我已经尝试过定位等等,但仍然没有运气.

任何帮助深表感谢.

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>

您的示例内容过于抽象,但如果与输入相关联,则您的居中内容应该是另一个标签元素.

Answer 2

您可以用一块石头杀死 2 只鸟 - 拥有与屏幕阅读器兼容的可访问输入，并使用以下标记结构将文本居中：

label {
  max-width:300px;
  display:block;
}

label span {
  text-align:left;
  display:block;
}
label input {
  width:100%;
}

 <form action="http://google.com">
    <label>
        <span>Email address</span>
        <input name="email" type="text" id="inputBox"/>
        <span style="text-align:center">center me</span>
    </label>
</form>

请注意，您不需要该for属性。这是实现可访问性的一种干净方法。一些简单的 CSS 可以对齐文本。如果您不想使用内联样式，您可以随时编写另一个类。