Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. ASP.NET
  4. Css Stylesheet - text-align property not working as I understand it should

Css Stylesheet - text-align property not working as I understand it should

Scheduled Pinned Locked Moved ASP.NET
questioncsshelptutorial
4 Posts 3 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    T Offline
    Tina P
    wrote on last edited by
    #1

    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

    R 1 Reply Last reply
    0
    • T Tina P

      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

      R Offline
      R Offline
      Rutvik Dave
      wrote on last edited by
      #2

      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>
      
      T 1 Reply Last reply
      0
      • R Rutvik Dave

        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>
        
        T Offline
        T Offline
        Tina P
        wrote on last edited by
        #3

        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

        M 1 Reply Last reply
        0
        • T Tina P

          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

          M Offline
          M Offline
          m dhu
          wrote on last edited by
          #4

          i think this is format you are looking for

          1 Reply Last reply
          0
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          • Login

          • Don't have an account? Register

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • World
          • Users
          • Groups