Want to align text in list vertically

[Rohithzr]

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

[Rohithzr]

i dont know code option is not working for some reasons

[Alen]

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

[CrocoDillon]

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).

[unasAquila]

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

padding: 0.3em 0em;

[ElijahFowler]

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

[Rohithzr]

@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”)

[Paulie_D]

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

[unasAquila]

Or using `list-style-image`

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

[CrocoDillon]

> 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.

[Paulie_D]

>setting line height equal to image height

Doesn’t always work…see my Codepen

[Rohithzr]

@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

[ChinmayDey]

You can use the contains within a `` or `

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

[Paulie_D]

>ChinmayDey

That’s just unnecessary mark-up.

[Rohithzr]

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?

[Author]

Posts