Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    UL & LI CSS Image alignment, is it possible?

    i'm creating a page which has a company logo as list bullets and was wondering if it's possible to re-align the images so that the text is vertically central to the image, can anyone help?

    Page in question:
    http://www.work-live.com/frontpage.html

    CSS for list style:
    UL LI.x{
    list-style-image: url(images/bullet.png);
    line-height:35px;
    margin:0px;
    padding:0px;
    }

    the image is 20px high and in all of the browsers i've tested it in the text is aligned to the base of the image, is there a way to align it to the middle?

    Thanks in advance for any help you may be able to give me.

  • #2
    New Coder
    Join Date
    Oct 2007
    Posts
    22
    Thanks
    0
    Thanked 4 Times in 4 Posts
    actually it is middle aligned but your line-heigth is too much decrease to 20px and it will be ok

    cheers

  • #3
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    Changing the line height doesn't work in FF. This does:

    add this to your css
    Code:
    .vertic-cent
    {
    position: relative;
    top:-5px;
    }
    Then enclose the text in your LI's in a span thus:
    Code:
    <li class="x"><span class="vertic-cent">company message board</span></li>
    You may have to adjust the span to get your desired position, I thought -5px looked about right.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #4
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excellent. That worked like a charm in both FF and IE, Thanks very much for your help Donkey!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •