CSS right align rule not working

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>

Please share your code and if possible then reproduce it on jsfiddle — Sachin, Jun 28 '13 at 14:32
What text should be right aligned? FYI you have two closing tags but only one opening one. — j08691, Jun 28 '13 at 14:38
How about 'Name2'? left or right? will Name1 and Name 2 be on the same line or separate lines? — Marc Audet, Jun 28 '13 at 14:43
possible duplicate of [Difference between and
with text-align:center;?](http://stackoverflow.com/questions/7756926/difference-between-span-and-div-with-text-aligncenter) — Chris Baker, Jun 28 '13 at 14:45

score 23 · Answer 1 · answered Jun 28 '13 at 14:40

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

In my case: I had quotes around the value 'right' in my style while using a class to assign the style. With the quotes, firefox did not align right. Without the quotes it worked. Odd rookie error but easy to fix. — TheSatinKnight, Jul 09 '18 at 23:22

score 8 · Answer 2 · edited May 23 '17 at 11:54

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.

score 4 · Answer 3 · answered Jun 28 '13 at 14:46

4

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.

So you could try changing the span tag to a div tag, and add the css element of width.

Or add display: block; to css font1 for the span tag and add a width:

Example:

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

answered Jun 28 '13 at 14:46

Gabe

847
1
9
16

Thanks, this worked when I added width /*eyeroll* – john k Apr 27 '20 at 21:40

CSS right align rule not working

3 Answers3