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>

Answer 1

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

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

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

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

在行动中看到它：http://jsfiddle.net/G3mhw/

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

.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上的内联元素-http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

Answer 2

问题是<span>元素是inline元素，因此它的宽度是从其中的内容中获得的。这意味着跨度只有内容的宽度，因此，添加text-align属性时不会看到任何更改。

这里有一个很好的答案供参考：参考

text-align将仅显示在block级别的元素中。为了解决您的问题，您可以对齐<td>元素中的文本，也可以将display: block添加到<span> CSS中。

Answer 3

Span标记默认情况下没有display:block，因此文本对齐不会产生效果，因为Span标记只会占据其内容的宽度。

因此，您可以尝试将span标记更改为div标记，并添加width的css元素。

或者添加显示：块；为span标记添加css font1，并添加宽度：

示例：

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