文本对齐：右；不适用于 <标签>

Posted 2023-03-05

【中文标题】文本对齐：右；不适用于 <标签>

【英文标题】：text-align: right; not working for <label>

【发布时间】：2012-02-24 11:14:54

【问题描述】：

很简单，我无法让文本在 <label> 元素中右对齐。

HTML

<div id="contact_form">
 <label for="name" id="name_label">Name:</label>
 </div>

CSS

#contact_form label 
  text-align: right;

我的页面：http://freshbeer.lv/development/en/contact.php

您可以看到姓名、电话、电子邮件等标签...在左侧对齐，但我需要将它们对齐到右侧，所以有人可以提出建议吗？

【问题讨论】：

将显示块属性赋予标签，它将起作用

【参考方案1】：

如其他答案所述，标签是一个内联元素。但是，您可以将display: inline-block 应用于标签，然后以text-align 居中。

#name_label 
    display: inline-block;
    width: 90%;
    text-align: right;

为什么是display: inline-block 而不是display: inline？出于同样的原因，你不能对齐label，它是内联的。

为什么是display: inline-block 而不是display: block？您可以使用display: block，但它会在另一行。 display: inline-block 结合了inline 和block 的属性。它是内联的，但你也可以给它一个宽度、高度并对齐它。

【参考方案2】：

Label 是一个内联元素 - 因此，除非定义了宽度，否则它的宽度与字母跨越的宽度完全相同。您的 div 元素是块元素，因此其宽度默认为 100%。

您必须将text-align: right; 放在您的情况下的div 元素上，或将display: block; 应用于您的label

另一个选项是为每个标签设置一个宽度，然后使用text-align。 display: block 方法将不需要使用它。

【参考方案3】：

您可以使文本在任何元素内右对齐，包括标签。

html：

<label>Text</label>

CSS：

label display:block; width:x; height:y; text-align:right;

这样，您可以为标签指定宽度和高度，并使其中的任何文本都向右对齐。