html – CSS右对齐规则不起作用

概述我创建了一个CSS规则来将文本对齐.但是,当我将该规则强加于单元格中的字体时,它并未将其与右对齐！任何人都可以告诉为什么??? 这是我的代码： CSS： .font1 { font-size: 60px; text-align: right; HTML： <table width="90%" align="center" bgcolor="#669999" border="10" 我创建了一个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 ><p><span >name1<br />        </span>        name2</p>      </p>      <p>&nbsp;</p></td>      <td wIDth="300" align="center" ><img src="pictures/logo - without bg.png" wIDth="200" height="200" alt="logo-without bg" /></td></tr></table>

解决方法 文本对齐仅适用于块级元素.块级元素在其框布局中占据最大宽度,因此可能存在将文本与左,中或右对齐的空间.

除非您明确将显示设置为阻止,否则span标记是内联的.内联元素占用尽可能少的空间来包装其内容.因此,在该空间内左右,居中或右对齐文本没有意义 – 空间正是内容的大小,因此没有对齐的余地.

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

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

总结

以上是内存溢出为你收集整理的html – CSS右对齐规则不起作用全部内容，希望文章能够帮你解决html – CSS右对齐规则不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。