CSS右对齐规则无法正常工作

Question

我已经创建了一个CSS规则来将文本向右对齐。但是当我将该规则应用到单元格中的字体时，它并没有将其对齐到右侧！有人能告诉我为什么吗？

以下是我的代码：

CSS：

.font1 {
    font-size: 60px;
    text-align: right;

HTML：

<table width="90%" align="center" bgcolor="#669999" border="10" cellpadding="0" cellspacing="0">
    <tr>
      <td style="border-width:0px 0px 0px 0px; font-family: Nyala; font-size: 80px; color: #000;"><p><span class="font1">Name1<br />
        </span>
        Name2</p>

      </p>
      <p>&nbsp;</p></td>
      <td width="300" align="center" style="vertical-align:top;border-width:0px 0px 0px 0px"><img src="pictures/logo - without bg.png" width="200" height="200" alt="logo-without bg" /></td>

</tr>
</table>

- HelmBurger

---

请分享您的代码，如果可能的话，请在jsfiddle上复制它。 - Sachin

完成。请现在检查。 - HelmBurger

哪些文本应该右对齐？顺便提一下，你有两个闭合的</p>标签，但只有一个开放的标签。 - j08691

删除了多余的</p>，但仍然没有帮助... - HelmBurger

“Name2”在左边还是右边？“Name1”和“Name2”会在同一行还是分开两行显示？ - Marc Audet

Answer 1

文本对齐只适用于块级元素。块级元素在其框布局中占据最大宽度，因此有可能存在左对齐、居中或右对齐文本的空间。

span标签是内联的，除非您明确将其显示设置为块。内联元素采用最小可能的空间来包裹其内容。因此，在该空间内左对齐、居中或右对齐文本没有意义--该空间的大小正好是内容的大小，因此没有对齐的余地。

在这种特定情况下对齐文本的更好方法是使用可用的块级元素TD：

<td style="text-align: right;"> ... </td>

在这里可以看到它的实际运用：http://jsfiddle.net/G3mhw/

或者，您可以应用 display:block 将 span 转换为块级元素：

.font1 {
    font-size: 60px;
    text-align: right; 
    display:block;
}

查看它：http://jsfiddle.net/G3mhw/1/

相关阅读

• MDN上的块级元素 - https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements
• About.com上的块级元素 vs. 行内元素 - http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

- Chris Baker

---

在我的情况下：我在使用类来分配样式时，在值“right”周围加上了引号。有了引号，Firefox就无法对齐右侧。没有引号就可以工作。这是一个奇怪的新手错误，但很容易修复。 - TheSatinKnight

Answer 2

问题在于<span>元素是一个inline元素，因此它的宽度取决于其内部内容。这意味着该标签的宽度仅限于其内容，因此当您添加text-align属性时，看不到任何变化。

以下内容是参考答案：Reference text-align只对block级别的元素有效。要解决问题，您可以将文本对齐到<td>元素或向<span>CSS添加display:block。

- War10ck

Answer 3

标签默认没有 display: block 属性，因此 text-align 不起作用，因为 标签只占据其内容的宽度。

所以您可以尝试将 标签更改为

标签，并添加 width 的 CSS 属性。

或者为 标签添加 display: block; 和 width 的 CSS font1 属性：

示例：

.font1 {
    .font-size: 60px;
    .width: 100%;
    .display: block;
    .text-align: right;
}

- Gabe

---

谢谢，当我添加了宽度时，这个起作用了。/翻白眼/ - john k