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标记是内联的，除非您明确将显示设置为block。内联元素占用尽可能少的空间来包装其内容。因此，在该空间内左右，居中或右对齐文本没有意义 - 空间正是内容的大小，因此没有对齐的空间。

在这种特定情况下对齐文本的更好方法是使用可用的块级元素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/

相关阅读

块级元素 - https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements
块级与内联元素 - http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

Answer 2

问题是<span>元素是inline元素，因此从其中的内容获取宽度。这意味着跨度仅与其内容一样宽，因此，当您添加text-align属性时，您看不到任何更改。

以下是一个很好的答案供参考：Reference

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

Answer 3

Span标签默认没有display：block，因此text-align不会产生效果，因为span标签只占用其内容的宽度。

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

或者添加display：block; to css font1 for span tag并添加宽度：

示例：

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

CSS右对齐规则不起作用

3 个答案: