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中.