11

我创建了一个 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>
4

3 回答 3

20

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

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

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

相关阅读

于 2013-06-28T14:40:06.527 回答
7

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

这是一个很好的参考答案：参考

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

于 2013-06-28T14:40:06.127 回答
4

Span 标签默认没有 display: 块，所以 text-align 不会有效果，因为 span 标签只会占据其内容的宽度。

所以你可以尝试将 span 标签更改为 div 标签，并添加宽度的 css 元素。

或者添加display:block；为 span 标签添加 css font1 并添加宽度：

例子：

.font1 {
    .font-size: 60px;
    .width: 100%;
    .display: block;
    .text-align: right;
}
于 2013-06-28T14:46:19.857 回答