Question

听起来很简单，但我说我正在使用引导程序，输入框有一个标签，当我调整下面的文本不会居中时。

这是一些简单的HTML演示：

{{1}}

标签应与输入文本框相关联，文本'（输入中心）应出现在中间的输入框下方。

理想情况下，输入文本框下方的（输入中心）文本应集中粘贴在标签正常的情况下。

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

非常感谢任何帮助。

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

你可以一石二鸟 - 拥有一个与屏幕阅读器兼容的无障碍输入，并使用这个标记结构将文本居中：

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对齐文本。如果您不想使用内联样式，则可以始终编写另一个类。

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

2 个答案: