Grow your CSS skills. Land your dream job.

the best way to make a UL list

  • # January 15, 2011 at 12:02 am

    I am making a contact list with an icon on the left. It is a vertical unordered list with a 32 by 32 icon on the left and some text on the right. Right now I have it like so

  • mailSend Us an Email
  • The problem with this is that it puts the text towards the bottom of the image. Now I am sure I could nudge it up, but is there a better way?

    # January 15, 2011 at 12:56 am

    why not just set a custom bullet in css? like…

    list-style-image : url(bullet.gif)

    then in the markup just do

  • Send Us an Email
  • and if you have multiple icons just give each list item a class. That should be vertically centered

# January 15, 2011 at 1:09 am

@msevrens has a solution.

# January 15, 2011 at 1:26 am

I should have specified a bit more. I actually want each list item to have a seperate image. There will be 4 images. I don’t really want to assign a different image in the css. I know I can do it that way. I was looking for a way to put the image in the list.

# January 15, 2011 at 10:58 am

I had the same problem a while back on a project for a client.. If you dont NEED the image to be in the HTML then i would just use a background image for each bullet, assigning a different class to each bullet. That way you can have complete control over the exact position of the image. If you do need it in the HTML (as my client did for editing reasons) then it’s tricky as the only way to vertically align text in CSS is to specify the element as a table cell in the CSS and use the vertical-align property. This however, does not work in ie6 or 7. The solution I came up with was to use jquery to measure the height of the text element and then dynamically set padding accordingly. I’d advise the background image method though unless you really need the image in the HTML itself.

# January 15, 2011 at 12:40 pm
li img {
vertical-align: middle;
}

you may need to set the line-height of the li to get the image where you want

# January 15, 2011 at 1:15 pm

You know, I tried the vertica-align: middle last night and it didn’t work. but today for some reason it does. Go figure..

# January 17, 2011 at 12:14 am

You could also set the line-height of the text to the height of the image. That would do it too.


text
/* forgive the inline styling, its only for example */

# January 17, 2011 at 12:24 am

I did not know that. i will try it.

# October 21, 2012 at 7:06 pm

Just read this now, but for other people this may help as it will sit your image (as a background image) inline with your text link (text link will need to have some padding to the left):

0 will place it to the left edge and 50% will center it vertically.

background:url(images/your_image.jpg) 0 50% no-repeat;

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

You must be logged in to reply to this topic.

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