CSS right align rule not working [closed]

Question

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???

Here is my code:

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

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.

The better way to align the text in this particular case is to use the block level element that is available, the TD:

<td style="text-align: right;"> ... </td>

See it in action: http://jsfiddle.net/G3mhw/

Alternative, you can apply display:block to turn the span into a block level element:

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

See it: http://jsfiddle.net/G3mhw/1/

Related reading

• Block-level elements on MDN - https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements
• Block-level vs. Inline Elements on About.com - http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

Answer 2

The problem is that the <span> element is an inline element 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-align property.

Here is a good answer for reference on this: Reference

text-align will only show in block level elements. To solve your problem, you can either align the text in the <td> element or add display: block to your <span> CSS.