4 Replies Latest reply on Mar 8, 2010 4:44 AM by osgood_

    Positioning text within block

    Markcronin123

      Hi

       

      I am wanting to postion text within a Box/block, these are list items that I have used as navigation buttons.

       

      I have set the box size and have selected "center" for text positioning, this positions the text in the centre horizontally ok.

       

      I would like to know how to position the text centrally verticially aswell?

       

      Many thanks

      Mark

        • 1. Re: Positioning text within block
          osgood_ Level 8

          Markcronin123 wrote:

           

          Hi

           

          I am wanting to postion text within a Box/block, these are list items that I have used as navigation buttons.

           

          I have set the box size and have selected "center" for text positioning, this positions the text in the centre horizontally ok.

           

          I would like to know how to position the text centrally verticially aswell?

           

          Many thanks

          Mark

          Short answer is if you are using a <div> you can't do this reliably. At the moment css has no property which will allow you to center text vertically in a container.

           

          You can center one line of text using the line-height css property but you have to set the box to a a specific height, which is not a good solution.

           

          You can use padding-top: XXpx; to set the text away from the top of the box but it will never be vertically centered in everyones browser. There's oem thing css just can't do yet. But the advantages outweigh the disadvantages.

          • 2. Re: Positioning text within block
            Markcronin123 Level 1

            Hi

             

            Thanks for quick answer.

             

            I can get the padding within a div option to work, but one of the List  items/ button texts needs different padding to the others because it is two lines of text.

             

            Can I differentiate the treatment of one "Li" ??

             

            Cheers

            Mark

            • 3. Re: Positioning text within block
              osgood_ Level 8

              Markcronin123 wrote:

               

              Hi

               

              Thanks for quick answer.

               

              I can get the padding within a div option to work, but one of the List  items/ button texts needs different padding to the others because it is two lines of text.

               

              Can I differentiate the treatment of one "Li" ??

               

              Cheers

              Mark

               

              You should be able to but your set up doesn't sound right. The text in a set of li's should automatically be pushed down if you set top padding on an element in which they are inserted, regardles of if the li makes one, two, three or more lines of text.

               

              You can add an id or a class to any li and then use some css to control its attributes

               

              <li class="two">Some text</li>

               

              .two {

              padding-top: 10px;

              }

               

              However if you want to post some code/css here its easier to see what the actual problem may be.

              1 person found this helpful
              • 4. Re: Positioning text within block
                Markcronin123 Level 1

                Adding a class to an induvidual "Li" has solved the issue in all browsers. Brilliant thanks