中心文本内部自动生成标签标签

Question

我从CMS获得了以下html片段：

<label title="">
    Land
    <input id="Land" name="Land" size="20" type="text" value="">
    <span class="field-validation-valid" data-valmsg-for="Land" data-valmsg-replace="true"></span>
</label>

我需要对文本Land进行居中，但我似乎无法弄清楚。我试过在标签上设置text-align: center，但它不起作用。我不能修改标记。我错过了什么简单的东西吗？

编辑:我想把它集中在这个输入上：

​

​

不要介意输入字段的右边缘。label跨度为输入字段宽度的100%。

Answer 1

有两种方法可以解决这个问题。

1. display属性指定是否/如何显示元素，因此必须将标签显示为块或内联块，以使其居中。

label {
  display: inline-block;
  text-align: center;
}

2.您可以使用html标记中心。

<center>
  <label title=""> 
     Land
     <input id="Land" name="Land" size="20" type="text" value="">
     <span class="field-validation-valid" data-valmsg-for="Land" data-valmsg-  replace="true"></span>
  </label>
</center>

如果您想将单词Land放在居中标签上，您只需添加以下内容

<center>Land</center>

Answer 2

标记是一个内联元素，因此其内容的宽度完全相同。

你需要一个div或者什么东西来做这件事

在不改变标记本身的情况下这样做充其量是很麻烦的，而且可能由一些javascript/jquery组成。

Answer 3

标签不会在100%宽度上展开，因为它是内联元素。若要在css标签上启用此设置，请执行以下操作：

label {
    display: block;
    text-align: center;
}

或将文本直接插入块元素，如: div等。