中心文本里面自动生成标签标签

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等。

Answer 4

编辑： 只需添加以下CSS即可获得所需的结果：

label input, label span {
    display: block;
}

观看现场演示：http://jsbin.com/sebinuje/1/edit?html,css,output或http://jsfiddle.net/mayank_agarwal/5yUQr/

---

使用div元素封闭代码段并在div上应用text-align属性。

HTML：

<div id="label-enclosure">
<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>
</div>

CSS：

#label-enclosure{
    text-align:center;
}

Answer 5

虽然我不建议使用<br/>标签，但这是您当前结构的一种方式

JSfiddle

<强> HTML

<label title="">
    Land
    <br/>
    <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>

<强> CSS

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