Html CSS右对齐规则不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17367121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS right align rule not working
提问by PHP Developer
I have created a CSS rule to align the text to the right. But when I am imposing that rule on a font in a cell, it is not aligning it to the right! Can anybody tell why???
我创建了一个 CSS 规则来将文本向右对齐。但是，当我在单元格中的字体上强加该规则时，它并没有将其向右对齐！谁能告诉为什么？？？
Here is my code:
这是我的代码：
CSS:
CSS：
.font1 {
font-size: 60px;
text-align: right;
HTML:
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> </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>
回答by Chris Baker
Text alignment only works with a block-level element. Block level elements occupy a maximum width within their box layout, so there's potentially space in which to align text to the left, center, or right.
文本对齐仅适用于块级元素。块级元素在其框布局中占据最大宽度，因此可能存在将文本向左、居中或向右对齐的空间。
A span tag is inline, unless you explicitly set the display to block. Inline elements take the minimum space possible to wrap their contents. So, it doesn't make sense to left, center, or right align text within that space -- the space is exactly the size of the content, so there's no room for alignment.
除非您明确将显示设置为阻止，否则 span 标记是内联的。内联元素占用尽可能小的空间来包装其内容。因此，在该空间内左对齐、居中或右对齐文本是没有意义的——空间正好是内容的大小，因此没有对齐的空间。
The better way to align the text in this particular case is to use the block level element that is available, the TD:
在这种特殊情况下对齐文本的更好方法是使用可用的块级元素 TD：
<td style="text-align: right;"> ... </td>
See it in action: http://jsfiddle.net/G3mhw/
看到它在行动：http: //jsfiddle.net/G3mhw/
Alternative, you can apply display:blockto turn the span into a block level element:
或者，您可以申请display:block将跨度转换为块级元素：
.font1 {
font-size: 60px;
text-align: right;
display:block;
}
See it: http://jsfiddle.net/G3mhw/1/
看到它：http: //jsfiddle.net/G3mhw/1/
Related reading
相关阅读
- Block-level elementson MDN - https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements
- Block-level vs. Inline Elementson About.com - http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
回答by War10ck
The problem is that the <span>element is an inlineelement and therefore gets it's width from the contents inside it. This means the span is only as wide as it's contents and therefore, you see no changes when you add the text-alignproperty.
问题是<span>元素是一个inline元素，因此从它内部的内容中获取它的宽度。这意味着跨度仅与其内容一样宽，因此，在添加text-align属性时您看不到任何更改。
Here is a good answer for reference on this: Reference
这是一个很好的参考答案：参考
text-alignwill only show in blocklevel elements. To solve your problem, you can either align the text in the <td>element or add display: blockto your <span>CSS.
text-align只会显示在block关卡元素中。要解决您的问题，您可以对齐<td>元素中的文本或添加display: block到您的<span>CSS。
回答by Gabe
Span tags do not have display: block by default, so the text-align will not have an effect since the span tag will just occupy the width of its contents.
Span 标签默认没有 display: 块，所以 text-align 不会有效果，因为 span 标签只会占据其内容的宽度。
So you could try changing the span tag to a div tag, and add the css element of width.
因此，您可以尝试将span 标记更改为div 标记，并添加宽度的css 元素。
Or add display: block; to css font1 for the span tag and add a width:
或者添加 display: block; 为 span 标签添加 css font1 并添加宽度：
Example:
例子：
.font1 {
.font-size: 60px;
.width: 100%;
.display: block;
.text-align: right;
}
