Css Stylesheet - text-align property not working as I understand it should
-
Hello guys, I just have some text in two separate labels that needs to be displaed side by side, so I'm trying to align the text horizonally (right align).....and text-aligh: right; property doesnt appear to be doing that. If I were to do a float:right then the text of first label will go all then way to the right....all I want to do is something like this example below:
6 Open docs 20 Closed docs
where 6 = text of first label and 20 = text of second label I want to display the example above in the following manner:
6 Open docs 20 Closed docs (notice how the two numbers 6 and 20 are right aligned and the text is left aligned
If text-align doesnt work, how do I do this? Any help would be appreciated! Thanks Tina
-
Hello guys, I just have some text in two separate labels that needs to be displaed side by side, so I'm trying to align the text horizonally (right align).....and text-aligh: right; property doesnt appear to be doing that. If I were to do a float:right then the text of first label will go all then way to the right....all I want to do is something like this example below:
6 Open docs 20 Closed docs
where 6 = text of first label and 20 = text of second label I want to display the example above in the following manner:
6 Open docs 20 Closed docs (notice how the two numbers 6 and 20 are right aligned and the text is left aligned
If text-align doesnt work, how do I do this? Any help would be appreciated! Thanks Tina
This is becuase, you are not using any table or div. you can either apply "left" or "right" align on text block. so you need to seperate the text/label in different
< TD >
tag in order to make some part right align (the numbers) and some part left align (the text). i.e. try like this...<table width="500px"> <tr> <td style="text-align: right"> 6</td> <td colspan="2" style="text-align: left"> Open docs</td> </tr> <tr> <td style="text-align: right"> 20</td> <td colspan="2" style="text-align: left"> Closed docs</td> </tr> </table>
-
This is becuase, you are not using any table or div. you can either apply "left" or "right" align on text block. so you need to seperate the text/label in different
< TD >
tag in order to make some part right align (the numbers) and some part left align (the text). i.e. try like this...<table width="500px"> <tr> <td style="text-align: right"> 6</td> <td colspan="2" style="text-align: left"> Open docs</td> </tr> <tr> <td style="text-align: right"> 20</td> <td colspan="2" style="text-align: left"> Closed docs</td> </tr> </table>
Hi there, thanks for the response.... Well you are right (i tried your html above and got the correct formatting), but unfortunately table is not as option...they want only spans or divs (apparently tables are considered evil :) at my work. So according to your message, what I'm getting is that since I'm using span, that's why text-alight isn;t quite working. You also said that div will work just fine, so shouldn't that mean if I were to replace table with divs in your example above, it shold work....well i tried it and it didn't. Hers's what I did. <pre> <div style="text-align: right"> 6 </div> <div style="text-align: left"> Open docs </div> <div style="text-align: right"> 20 </div> <div style="text-align: left"> Closed Docs </div> </pre> Is there a way to accomplish this with div and or spa
-
Hi there, thanks for the response.... Well you are right (i tried your html above and got the correct formatting), but unfortunately table is not as option...they want only spans or divs (apparently tables are considered evil :) at my work. So according to your message, what I'm getting is that since I'm using span, that's why text-alight isn;t quite working. You also said that div will work just fine, so shouldn't that mean if I were to replace table with divs in your example above, it shold work....well i tried it and it didn't. Hers's what I did. <pre> <div style="text-align: right"> 6 </div> <div style="text-align: left"> Open docs </div> <div style="text-align: right"> 20 </div> <div style="text-align: left"> Closed Docs </div> </pre> Is there a way to accomplish this with div and or spa