Grow your CSS skills. Land your dream job.

Want to align text in list vertically

  • # May 14, 2013 at 3:15 pm

    i hav this code

    • abcde
    • zxcvb

    and this css

    ul li{
    list-style-image:”src”;
    list-style-position:”inside”;
    }

    the problem is that this text here is aligned at the bottom
    i want it centered

    # May 14, 2013 at 3:22 pm

    i dont know code option is not working for some reasons

    # May 14, 2013 at 4:42 pm

    You mean something like this: http://codepen.io/anon/pen/ugEje

    # May 14, 2013 at 5:21 pm

    I’m guessing the list-style-image is taller than the height of the li without the image and the text is baseline aligned with this image. Vertical-align doesn’t seem to work so I’m lost (without extra markup that is).

    # May 14, 2013 at 6:24 pm

    just give it equal padding top and bottom this should correct for any image size issues i.e :

    padding: 0.3em 0em;

    # May 14, 2013 at 9:52 pm

    Create a [Codepen](http://codepen.io/ “Codepen or it didn’t happen!”) and we can get you fixed up. ;)

    Also, the code option requires that you select all the text that you want in the code box. Just a tip. ;)

    HTH,

    -Elijah

    # May 15, 2013 at 6:56 am

    @AlenAbdula well not really iam using an image of about 34px as my list style

    @Dillion well vertical align neva works i always end up using tables in such cases

    @unasAquila no it doesnt seem to work for me coz it gives padding to whole li including the image bullet so it does not work

    @Elijah creating a pen but replace it with a image of 36*36 px then work around it
    and thanx for code issue i was using it as tags… my bad

    [pen](http://codepen.io/anon/pen/bkdny “pen”)

    # May 15, 2013 at 7:19 am

    The answer is to not use `list-style-image` as, as you have discovered, this causes issue with the text alignment.

    Instead use the image as a bg image like this: http://codepen.io/anon/pen/KIheg

    # May 15, 2013 at 7:43 am

    Or using `list-style-image`

    [link](http://codepen.io/unasAquila/pen/botkC)

    # May 15, 2013 at 9:47 am

    > Or using list-style-image

    That has nothing to do with `list-style-image` but with setting line height equal to image height, breaks if the text is more than 1 line.

    # May 15, 2013 at 10:32 am

    >setting line height equal to image height

    Doesn’t always work…see my Codepen

    # May 15, 2013 at 11:10 am

    @Paulie D kinda workd for me man … thanks a lot now i can get rid of the tables i created

    > setting line height equal to image height

    i tried line height and image height
    but didnt work the pen is perfect… atleast for my problems

    # May 15, 2013 at 11:14 am

    You can use the contains within a `` or `

    ` or another tag and use line-heights css for this tag.

    # May 15, 2013 at 11:20 am

    >ChinmayDey

    That’s just unnecessary mark-up.

    # May 16, 2013 at 4:18 am

    just wanted to know if theres any method to display a couple of backgrounds in an li
    the thing is that the image bullet (converted to background)
    now i want that on hover it display a blue bar of selection in background without removing the bullet background

    currently i am achieving it through another background which i photoshoped (the bullet image and bar image together) and am changing the bg image on hover

    any better way of doing it?

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".